XHTML / CSS: How to make inner div get 100% width minus another div width

Question

I have 2 nested divs inside the outer one whose width is: 100%. Both nested divs must be on the same line and must first get the size from it:

<div id="#outer" style="width:100%; border:1px"> <div id="#inner1" style="border:1px; display:inline"> inner div 1. Some text... </div> <div id="#inner2" style="width:100%????; border:1px; display:inline"> inner div 2... </div> </div> 

The question is how to make the # inner2 div to get the rest of the horizontal space if the width of the # inner1 div is not specified and depends on what is inside?

PS All styles in a separate class in my case, here I put CSS in the style attributes just for simplicity.

I want the result to work in IE7 + and FF 3.6

In more detail for me it looks like this:

  <style type="text/css"> .captionText { float:left; } .captionLine { height: 1px; background-color:black; margin: 0px; margin-left: 5px; margin-top: 5px; border: 0px; padding: 0px; padding-top: 1px; } </style> <table style="width:300px;"> <caption width="100%"> <div class="captionText">Some text</div> <div class="captionLine"> </div> </caption> <tr> <td>something</td> </tr> </table> 

Here is an image of what I want:

Answer 1

Mysterious overflow: hidden; - your friend is here. It stops the elements located next to the floats extending beyond the float - I think this is the layout you are looking for.

Here are some slightly edited HTML: I don’t think you can have # characters in id s:

 <div id="outer"> <div id="inner1"> inner div 1. Some text... </div> <div id="inner2"> inner div 2... </div> </div> 

And she uses CSS to achieve the desired layout.

(I added extra CSS for IE 6 with HTML conditional comments . I just noticed that you really didn't have to work in IE 6 too, but if you want to be nice for IE 6 users there ...)

 <style type="text/css"> #outer { overflow: hidden;/* Makes #outer contain its floated children */ width: 100%; /* Colours and borders for illustration purposes */ border: solid 3px #666; background: #ddd; } #inner1 { float: left;/* Make this div as wide as its contents */ /* Colours and borders for illustration purposes */ border: solid 3px #c00; background: #fdd; } #inner2 { overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */ /* Colours and borders for illustration purposes */ border: solid 3px #00c; background: #ddf; } </style> <!--[if lte IE 6]> <style type="text/css"> #inner2 { zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */ } #inner1 { margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */ } </style> <![endif]--> 

Tested and works in IE 6, 7 and 8; Firefox 3.5; and Chrome 4.

Answer 2

If you are reading this now, you can probably use calc , so be thankful.

HTML

 <div class="universe"> <div class="somewidth"> </div> <div class="everythingelse"> </div> </div> 

CSS

 .universe { width: 100%; height: 100%; } .somewidth { width: 200px; height: 100%; } .everythingelse { width: 800px; /* fallback for emergencies */ width: calc(100% - 200px); width: -moz-calc(100% - 200px); width: -webkit-calc(100% - 200px); height: 100%; } 

See the desktop in JSFiddle .

Answer 3

You will need to put the inner 1 div to the left, for example:

 <div id="#outer" ....> <div id='#inner1" style="float:left; border: 1px solid #000;"> blabla </div> <div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ..."> gnihihi </div> </div> 

That should do the trick. Check this! date

Answer 4

You do not need to use a div for a nested element, just use a SPAN like this

  <div> <span style="display:inline-block;width: auto;border: solid 1px black;"> hey you </span> <span style="display:inline-block;marging: 0px 2px;border: solid 1px black;"> always use proper tools. </span> </div> 

Answer 5

Expanding in response to @Nasser Hajloo, this works for me (even in IE6)

  <div style="width: 400px; border: solid 1px red;"> <span style="float:left;width: auto;border: solid 1px black;"> hey you </span> <div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div> </div> 

Try with a main div smaller than 400 pixels to see how it is customizable. (It also works with divs, not spaces. The key is the width: auto in the first div / span.)

Answer 6

Try this: socket inner1 inside inner2 and remove display:inline from inner2 , for example:

 <div id="#outer" style="width:100%; border:1px solid red"> <div id="#inner2" style="width:100%; border:1px solid black;"> <div id="#inner1" style="border:1px solid blue; display:inline"> inner div 1. Some text... </div> inner div 2... </div> </div> 

You can see how it works here: http://jsbin.com/adiwi

Answer 7

From your code, it looks like you're trying to get a horizontal line to fill in the empty space in your div. If I'm right, you want to create a visual effect with markup. Correct me if I am wrong.

(It would be nice to see an image of what you want)

Example:

 Title --------------------------- or Title: Caption ------------------ 

This is not the best practice. You should try to get this effect using CSS.

Try to make your code more semantic:

 <div id="#outer" style="width:100%; border:1px"> <h3 style="border:1px; display:inline"> Caption </h3> </div> 

To get the string:

• create an image with the color you want
• make the height the same as you want the line to be in px
• position it using background Property

.

 #outer h3 { display: inline; background-color: #000; color: #FFF; } #outer { width: 100%; /* is the default of block element but just for celerity */ background: #000 url('image path') center left; /* position the image */ } 

Answer 8

Your first problem is that you are prefixing your identifiers with '#'. # Used only in CSS to refer to an element with this identifier, for example. CSS rule #outer {width: 100%} applies to your element:

 <div id="outer"></div> 

Also, you do not need to use the width for divs (or any other block elements) that do not float, since they already automatically occupy 100% of the available width.

If you want 2 DIVs to appear on the same line, you must put the first on the left. Then the adjacent DIV will appear on the side, again you do not need to specify widthd for the second element. Here is your complete example, including a different color frame for each div.

I made the boundaries big so you can see what happens next.

 <html><body> <style type="text/css"> #outer { border: solid 5px #c00; } #inner1 { border: solid 5px #0c0; float: left; width: 200px; height: 300px; } #inner2 { border: solid 5px #00c; height: 300px; margin-left: 210px; /* 200px left width + 2 x 5px borders */ } </style> <div id="outer"> <div id="inner1"> inner div 1. Some text... </div> <div id="inner2"> inner div 2... </div> </div> </body></html> 

Answer 9

Another solution is to run javascript, which resizes the captionLine class when this document is loaded.
It took some time to get it to work under IE8, did not try IE7, but should work.
2 notes.

• IE does not support getElementsByClassName, so this function is overwritten.
• IE treats fields differently when objects are modified and moved using style.marginLeft, so IE seems to save margin in the class declaration and add it to the new .margin style.

 <body onload="resizeCaptionLine()"> <style> caption { border: 1px solid blue; padding: 0px; } .captionText { border: 1px solid red; float: left; } .captionLine { background-color:black; margin: 0px; margin: 5px 0px 0px 5px; border: 0px; padding: 0px; padding-top: 1px; } </style> <table style="width:300px;"> <caption width="100%" name="caption1"> <div class="captionText">Some text</div> <div class="captionLine"> </div> </caption> <tr> <td>something</td> </tr> </table> <table style="width:300px;"> <caption width="100%" name="caption2"> <div class="captionText">Some text</div> <div class="captionLine"> </div> </caption> <tr> <td>something</td> </tr> </table> <script type="text/javascript"> function getElementsByClassName(node, class_name) { elems = node.all || node.getElementsByTagName('*'); var arr = new Array(); for(j = 0; j < elems.length; j++) { if (elems[j].className == class_name) arr[arr.length] = elems[j]; } return arr; } function resizeCaptionLine() { var elems = getElementsByClassName(document, 'captionLine'); for(i = 0; i < elems.length ; i++) { var parent = elems[i].parentNode; var sibling = getElementsByClassName(parent, 'captionText'); var width = parent.offsetWidth - sibling[0].offsetWidth; if(elems[i].currentStyle) { var currentMargin = elems[i].currentStyle.marginLeft; var margin = parseInt(currentMargin.substr(0,currentMargin.length-2)); elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px"; } else if (document.defaultView && document.defaultView.getComputedStyle) { var currentStyle = document.defaultView.getComputedStyle(elems[i], ''); var currentMargin = currentStyle.marginLeft; var margin = parseInt(currentMargin.substr(0,currentMargin.length-2)); elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px"; } else { var currentMargin = elems[i].style.marginLeft; var margin = parseInt(currentMargin.substr(0,currentMargin.length-2)); elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px"; } elems[i].style.width = (width - margin)+"px"; } } </script> </body> 

Answer 10

The answer is really simple! If you have a fixed div (menu) on the left side, then give a fixed div float: left and your right flexible div margin-left , which is larger than the width of the first fixed case.