Question

I keep finding that if I have nested divs inside each other, and one of the inner ones is floated, the outer one won’t expand around it.

Example:

<div style='background-color:red; '>     asdfasdf     <div style='float:left; background-color:blue; width:400px; height:400px;'>         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />         asdfasdfasdfasdfasdfasdfasdf<br />     </div>     asdfasdf </div> 

What do I need to do to the outer div to make it cover the inner one? IE: Put it’s border/background color all the way around it?

Also, is there a general principle I am bumping up against here? If so, what should I look up to get a solid understanding of what it is?

Thanks!

Edit

Hi All,

Thanks for the answers, semantically correct and no, and for the links.

Though I will end up using overflow in the final work, I will leave Ant P’s answer as accepted, as it was the first one that really worked, and got me out of a short term jam, even though it offends semantic sensibilities.

As a long-time html hack trying to move to decent css layouts, I can certainly understand, and sympathize with, using semantically incorrect hack that gets the job done, though I am sure he will change that habit after this =o)

Answer 1

You can do it strictly with CSS using overflow:hidden

<div style='background-color:red;overflow:hidden;'> ... </div>