How can I specify figure width percent in a div and still default to 100% width on small media

In fluid grids, I want a div that will display a figure and figure caption within a box where I can specify the float (left, center or right) and the percent width that defaults to 100% width below some display size. I would like this div to display correctly on all browsers and as many Internet Explorer versions as possible.
This appears to work fine in my fluid.css:
.myfig {
            background-color: #DAE7F1;
            border: medium solid #000;
            padding: 4px;
            margin: 4px;
            text-align: left;
             width: 33%;
/* On phones and vertical tablets make all figures 100% wide */
@media only screen and (min-width: 0px) and (max-width: 700px) {
    .myfig {
        width: 100%;
and my test.html:
<div class="myfig" style="float:right;" >
   <img src="Images/time-to-adapt.jpg" alt="stuff">
   Figure caption
</div>
But if I put the width in
<div class="myfig" style="float:right; width: 50%;" >
The figure will be 50% so this overrides the default 33% but the figure does not revert to 100% for small media.
I assume the problem is in the order of processing. Anyone know how to make this work or of a definition that will meet my needs?

Use CSS classes.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, 3-figures</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/**put this into your CSS Reset**/
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     margin: 0;
     padding: 0;
img {
     width: 100%;
     vertical-align: baseline
body {
     font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
     font-size: 100%;
     background-color: #536475;
     margin: 0 auto;
     padding: 0;
section {overflow:hidden;}
figure {
     float: left;
     padding: 2%;
     text-align:center;
     color:#FFF;
     font-size: 95%;
/**re-usable classes**/
     .twenty {width:20%}
     .forty {width:40%}
     .sixty {width:60%}
/* Special Rules for Mobile, Tablets */
@media only screen and (max-width: 768px) {
     figure, .twenty, .forty, .sixty {
          float: none;
          display: block;
          margin: 0 auto;
          width: 98%;
          font-size: 75%;
</style>
</head>
<body>
<section>
<figure class="twenty"><img alt="description" src="http://placehold.it/200x125"><p>Fig.1</p></figure>
<figure class="forty"><img alt="description" src="http://placehold.it/200x125"><p>Fig.2</p></figure>
<figure class="sixty"><img src="http://placehold.it/200x125" alt="description" ><p>Fig.3</p></figure>
</section>
</body>
</html>
Nancy O.

Similar Messages

Creating table in MS Word document via OLE: how can I specify column width

What method and properties do I need to use in order to specify the width of each column in a MSWord table created via ABAP using OLE ? Or, better yet, how can I create a table where the columns are sized using the Autofit feature?
I am already familiar with the standard sample code for creating a word document that contains a table (found in ZOLE_WORD_DOC_CREATE).
Tom Eshelman

I found a solution - although I would still be interested if anyone knows how to turn on autofit when creating a table, The following code can be used to specify the width of one cell at the same time it is filled with data. I found this in an old SDN posting.
FORM write_cell_in_table USING    p_row
                                   p_col
                                   p_text
                                   p_font
                                   p_size
                                   p_bold
                                   p_color
                                   p_width
                                   p_underline.
                                  P_ALIGNMENT.
DATA: l_len TYPE i.
l_len = STRLEN( p_text ).
IF l_len IS INITIAL.
    l_len = 1.
ENDIF.
*--Getting cell coordinates
CALL METHOD OF gs_table 'Cell' = gs_cell
EXPORTING : #1 = p_row "first row
              #2 = p_col. "first column
*--Getting the range handle to write the text
GET PROPERTY OF gs_cell 'Range' = gs_range .
IF p_width > 0 AND l_len > 1.
    SET PROPERTY OF gs_cell 'PreferredWidth' = p_width.
ENDIF.
*--Filling the cell
GET PROPERTY OF gs_range 'Font' = gs_font .
SET PROPERTY OF gs_font 'Name' = p_font .
SET PROPERTY OF gs_font 'Size' = p_size .
SET PROPERTY OF gs_font 'Bold' = p_bold . "Not bold
SET PROPERTY OF gs_font 'Underline' = p_underline . "Double line
GET PROPERTY OF gs_cell 'Shading' = gs_shading .
SET PROPERTY OF gs_shading 'BackgroundPatternColorIndex' = p_color.
SET PROPERTY OF gs_range 'Text' = p_text(l_len) .
ENDFORM.                    " write_cell_in_table

How can I store photos on an external hard drive and still manage w IPhoto?

The hard drive on my MacBook is almost full and I want to move my photos to an external hard drive. Can I do this and still manage and organize the photos using I Photo? I can export the photos, but when I do I lose the organization (Events, Albums, etc.) that are in I Photo. With my new DSLR camera the photos (JPEGS) are really big and I am quickly running out of storage on the MacBook. Thanks in advance for you help.
Jim in Seattle

Moving the iPhoto library is safe and simple - quit iPhoto and drag the iPhoto library intact as a single entity to the external drive - depress the option key and launch iPhoto using the "select library" option to point to the new location on the external drive - fully test it and then trash the old library on the internal drive (test one more time prior to emptying the trash)
And be sure that the External drive is formatted Mac OS extended (journaled) (iPhoto does not work with drives with other formats) and that it is always available prior to launching iPhoto
And backup soon and often - having your iPhoto library on an external drive is not a backup and if you are using Time Machine you need to check and be sure that TM is backing up your external drive
LN

How can I run iTunes to manage my iPod music and still manage my iPhone / iPad?

Help! I ditched iTunes 11 on my desktop PC a year ago or so, and reverted to 10.7, because of the crazy decision Apple made to remove "Composer" as a category, thereby making iTunes useless for anyone with a classical music collection.
That is painful, because 10.7 doesn't allow me to upgrade my iPhone Apps. But at least I have my music...
However, last week I bought an iPad Air. When I connected it to my iTunes 10.7 I was given short shrift. IOS 7 will only talk to iTunes 11.
I hit on what I thought was an ingenious solution. I loaded iTunes 11 onto my laptop PC. I thought I would then be able to transfer my iPhone's affections (and apps) to the laptop, and then connect the iPad to the laptop too. OK, so I had no option but to "upgrade" my iPhone to IOS 7.
So now I find that my desktop (iTunes 10.7) can talk to neither my iPhone nor my iPad.
My iPhone will connect to the laptop, but cannot establish any app linkage. My iPad remains unused.
One of the things I used to love about Apple products was that everything just WORKED. Please can someone suggest a way forward for me. Has iTunes 11 been fixed to deal with Composers, so I can upgrade to it? I can't copy my entire music database to my laptop because the disk is not big enough. Solutions eagerly awaited!

Thanks for the reply, but I need a way forward. Here are the options I can envisage and I would find it really helpful to have their feasibility commented on - or better options suggested.
1) My ideal solution. I sever my iPhone's connection to my desktop system so that I can run iTunes 11 on my laptop and sync iPhone and iPad to that. Problem: I don't know how to sync the iPhone to the laptop.
2) Upgrade my desktop to iTunes 11, completely destroying my classical music collection's backup on my 120GB iPod classic. This is OK so long as I never need to reload the iPod.
3) is there a way I can somehow freeze my iTunes 10.7 on my desktop and then upgrade to iTunes 11? That would also be an ideal outcome, because I don't add new music to my iPod because it's full.
Any suggestions warmly welcomed!

How can we configure the width of the table in SAP DB

Hello sirs,
How can we configure the width of the table in SAP DB? (<b>i.e to specify the total width of the sum of all columns</b>). I need to change the default value of table width for adding fields with biggger sizes...
With best regards,
Sudheesh....

Hi,
The restrictions for using SAPDB are available at the following link http://dev.mysql.com/doc/maxdb/en/f6/069940ccd42a54e10000000a1550b0/content.htm
The 'internal length of the table' is 8088 bytes, which intern maps to the column width attribute.
Can we change the column width?
The answer is 'NO'.
check the general Column width error (-1115) at link below where it is specified that the column width can be altered http://dev.mysql.com/doc/maxdb/en/bb/57f18204fd11d2a96c00a0c9449261/content.htm
Refer link below for more details on the width of each column (based on the datatype associated with the column). http://orgs.man.ac.uk/documentation/mysql/manual_Column_types.html
So we will have to judiciously look into the boundary values for each column and set the right length because if the column is char(200) and it holds a null value then length allocated is 200 bytes.
The restriction cannot be broken.
Regards,
S.Divakar

How can I fix report width?

How can I fix report width? I have 10-15 columns in the report and when I show report it goes outside the screen,how can I show this optimally to the users?

Hi,
You can specify the Width of the Section (where you are displaying the Report) to show the report within that area.
Navigation: Page Options ==> Edit Dashboard ==>Section Properties ==> Format Section ==> Additional Formatting Options ==>Width (say =200)
-Vency

How can we specify the Mailbox for Notes?

In Mail.app, how can we specify the Mailbox for Notes (where the new notes will be resided)? It is now 'On My Mac'. I wish to change to my IMAP Mailbox so it sync with my iPhone by just checking email (not by syncing on iTunes).
Thanks in advance.
Message was edited by: Ekapon

You could use the DecimalFormat or NumberFormat to do the job.
double number 1234.567;
DecimalForamt df = new DecimalFormat("###.##");
String s = df.format(number);or
double number 1234.567;
NumberFormat nf = NumberFormat.getNumberInstance();
nf.setMaximumFractionDigits(2);
/* if needed.
   nf.setMaximumIntegerDigits(value);
   nf.setMinimumFractionDigits(value);
   nf.setMinimumIntegerDigits(value); */
String s = nf.format(number);I didn't test the codes but they should work. For more information, please consult the documentations.

How Can i specify multiple server names in rwservlet.properties file?

How Can i specify multiple server names in rwservlet.properties file without clustering?
I am using oracle 10g Application server. we have 3 servers Repsvr1, RepSvr2 and RepSvr3. Now i need to configure rwservlet.properties file to point to these servers based on any running report. i got 3 keymap files with reports info.
Sample entry in the key map file is:
key1: server=Repsvr1 userid=xxx/yyy@dbname report=D:\Web\path1\path2\reports\Report1.rdf destype=cache desformat=PDF %*
key2: server=Repsvr2 userid=xxx/yyy@dbname report=D:\Web\path1\path3\reports\Report2.rdf destype=cache desformat=PDF %*
rwservlet.properties file letting me to enter only one servername. Even though i merged all 3 keymap files into 1, still i have the server name issue. If i leave the server to the default name still i am getting the below error.
REP-51002: Bind to Reports Server Repsvr1 failed. However, i know the default rep_<servername> would be used incase we dont have SERVER=<value> parameter in the rwservlet.properties file.
If i specify the servername in the rwservlet.properties file then only Repsvr1 reports are working fine and other 2 server reports are giving the same error like
REP-51002: Bind to Reports Server <<Server Name>> failed.
how can i configure the info which will work all 3 reports. 2 Port servers are invoking using oracle forms and report server is invoking using ASP pages.
If i specify Server name & Key map file in rwservlet.properties one at a time, all the reports are working without any error, whenever i am trying to integrate all 3 to workable i am getting binding error. if i exclude the server from rwservlet.properties still i am getting the same error.

My RELOAD_KEYMAP setting is YES only.As i said If i specify Server name & Key map file in rwservlet.properties one at a time, all the reports are working without any error.
keymap file entries
key1: server=Repsvr1 userid=xxx/yyy@dbname report=D:\Web\path1\path2\reports\Report1.rdf destype=cache desformat=PDF %*
key2: server=Repsvr2 userid=xxx/yyy@dbname report=D:\Web\path1\path3\reports\Report2.rdf destype=cache desformat=PDF %*
If i use http://server.domain:port/reports/rwservlet? cmdkey = key1 should bring the report from Repsvr1 and http://server.domain:port/reports/rwservlet? cmdkey = key2 should bring the report from Repsvr2, but i am getting an error from Repsvr2 saying that REP-51002: Bind to Reports Server repsvr2 failed.
Only Servername Repsvr1 is in rwservlet.properties file. Now what is the best option to by pass the server from rwservlet.properties file and should be from keymap file. if i comment server name in rwservlet.properties file still i am getting REP-51002: Bind to Reports Server <<Server Name>> failed error for both keys.

How can I specify the default tab in a CHM Output?

My company uses CHM-based help for some of its products. We build the CHM files from RoboHelp 9, and while these CHM files don't really have a full Index attached to them, the Index tab shows up in the output anyway. Unfortunately, we are suddenly seeing that when the CHM file is launched from our program, the Index tab is displayed by default. We'd rather have the Contents tab be the default look, especially considering that the Index does not exist.
I have poked around into how you can specify a default tab for a CHM file, and the only information I have found suggests that using a CHM file creates a file (HH.dat) that specifies which tab should be displayed on a user-by-user basis, and that the last tab displayed when you close the CHM should be the first one displayed when you re-open it. While this is true if you open the CHM independent from the product, when you launch it from our program, it's all Index, all the time.
So, my question is: How can I specify the default tab for a CHM file? Or, failing that, how can I excise the Index tab from my CHM output.

Hi there
This will be something up to your application developer to resolve. When s/he issues the call to open the CHM, there are parameters that may be used to always open with the desired tab "in front".
Point your developer to the link below and advise that s/he is most likely interested in the section titled: Programming Tips.
Click here to view
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7, 8 or 9 within the day!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

How can I include a success message in a drag and drop interaction - I don't see this option in the Actions on success options, and cannot figure it out?

How can I include a success message in a drag and drop interaction - I don't see this option in the Actions on success options, and cannot figure it out?

I suspected you used the eye icon on the timeline to hide the message, but that one has no impact whatsoever on the published version. It is only meant to be used for editing reasons on the stage, to hide objects temporarily on a crowded stage. It is confusing, certainly in CP8 where for both instances the same eye icon is used. In previous versions the Properties panel had a checkbox for 'Show in Output', which was IMO much clearer than this eye icon. But of course, that is only my personal opinion.

How can i change the width of a webapp depending on the view?

In Dashcode how can i change the width of the web app depending on the width of the view. I am using the stack layout.
For example if view 1 had a width of 400 px
the web app would have a width of 400 px
if i changed to a view with a 400 px
the webap would change to have a width of 400 px
it automatically adapts the the hight of a view how do i do the same with the width.

While they may auto adjust to what it thinks is a correct width, far too often it allocates way too much room and that causes lists with 4 columns to be much longer than they need to be and without the ability to adjust them, lists look strange.
http://twitpic.com/23ro09/full is an example of the first column having been allocated too much room.
Denzel

How can I specify an SFTP directory path that has spaces in it?

The directory (path) on my SFTP server has spaces in some of the folder names: e.g. /data/Cisco Products/UC Applications/
How can I specify this path in the directory field of a remote server definition if I want to upload files from my SFTP server to the CUCM?
I've tried surrounding the whole path in quotes, %, *, backslash space, point, hash...running out of things to try. Must be possible...surely?!#
Thank-you
-Rob.

I haven't tried this but when i hit tab to auto complete on a linux machine i notice a space and backslash between two words. I can see you tried backslash space. Try space backspace - <word><space><backslash><word>

How can I specify the path in Form Builder 9.0

Hi, everyone,
could anybody tell me how can I specify the path in Form Buidler 9.0? there is problems when I want to attach library in form builder. thanks to Kuldeep RAwat and Natalia Vidal, I know I should specify the path, but I still don't know how to specify, how can I do?
besides, when I run a form, sometime there will be a warnig:
Please acknowledge message
what's that meaning?
thank you very much for your great help

Shay Shmeltzer thank you very much for your so quickly response. I have modified the file and my form can run now!
but, when I open my form, it always suggest me:
FRM-10102: Cannot attach PL/SQL library TalbotStandard. This library attachment will be lost if the module is saved.
so everytime I open my form, I must attach the library manully. I don't know the reason. do you know that or anybody else knows that? thank you very much!
have a good weekend :-)

How can user specify HAVING clause in Interactive Report

How can user specify HAVING clause in Interactive Report after making the group by selection? Under Actions/Format, the user sees just the Group By-Sort and Group By options.

Hi ,
Thanks for your information.
I am new to the APEX.*i need to show Progress bar while opening the each page* then user can know some process is happening from the backside and i don't know where i need to add and call the below function.could you please provide the steps for the progress bar.
In my application there are almost 100 pages are there so, i need to show progress bar on each page while opening .could you please provide Global function to call on each page.
function html_url_Progress(pThis){
$x_Show('AjaxLoading');
window.setTimeout('$s("AjaxLoading",$x("AjaxLoading").innerHTML)', 100);
//doSubmit('APPLY_CHANGES');
redirect(pUrl);
Regards
Narender B

JDev TP3 / UML Class Diagram / How can I specify a derivative attribute?

Hello,
I'm trying to put derivatives (or calculated) attributes such as "age" or "price" in a class of UML diagram. In all of UML books that I've seen, a derivative attribute is represented with a "/" and the attribute's name. For example, "/age" or "/price". But in the class diagram of JDeveloper I can't put "/" in the name of attribute. So, how can I specify a derivative attribute?
Thanks in advance,
JVN

Unfortunately, it is not possible to denote derived attributes in TP3. Bug 6915067 has been logged to address this in a future version.
Thanks, Guus (JDev PM)

How can I specify figure width percent in a div and still default to 100% width on small media

Similar Messages

Maybe you are looking for