Css inner div width

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

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:

 
 
inner div 1. Some text.
 
inner div 2.
 
 

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:

  .captionText < float:left; >.captionLine 
 
Some text
 
 
something
 
 
 

Here is the image of what I want:

It probably wouldn’t be that obvious with tables either though. I’ve never quite understood the rules browsers use to calculate non-defined table column widths.

10 Answers 10

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 id s:

 
 
inner div 1. Some text.
 
inner div 2.
 
 

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