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

Question

I have 2 nested divs inside outer one, which has width:100%. Both nested divs should be in one line and first should get it size from it's contents:

<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> 

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

P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.

I want result to work in IE7+ and FF 3.6

In more details 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 the image of what I want:

Answer 1

The mysterious overflow: hidden; is your friend here. It stops elements adjacent to floats from extending behind the float — I think that’s the layout you’re looking for.

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

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

And here’s the CSS to achieve the layout you want.

(I put in additional CSS for IE 6 with HTML conditional comments. I just noticed you didn’t actually need it to work in IE 6 too, but if you fancy being nice to the IE 6 users out 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 working in IE 6, 7, and 8; Firefox 3.5; and Chrome 4.

Answer 2

If you're 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 working example on JSFiddle.