CSS: Basic layout question - keeping nested elements inside each other.

Question

Hi All,

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>

Answer 2

If you just float the outer div, it will expand to contain the nested div. Combining floated and unfloated elements in the layout is usually troublesome.

Answer 3

it is simply staggering how many times this is the base problem for some of the CSS questions on SO. What is even more staggering is how many times someone gives an answer like Ant P's. While technically correct, it is completely semantically incorrect. Themis is absolutely right. Just add overflow:hidden to the parent of the floated divs. Sometimes to make it play nice with IE you may have to specify a width OR a height. That is really all there is to it.

Answer 4

If you are the type that likes explanations (rather than just "do this") here are some excellent articles that explain several methods:

Simple Clearing of Floats

How to Clear Floats Without Structural Markup

Clearing Floats

Answer 5

This article about CSS systems is definitely worth a read. As Darko Z said it is staggering to see the semantically incorrect answer given by Ant P.

Answer 6

I can't beat the answers that have been posted, but I do have a good tip for helping to diagnose layout problems without screwing up your markup.

Add this section to the bottom of your CSS file and keep it commented out when you don't need it:

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

Often I'll find that a layout that actually works (particularly one that uses the "add a <br> with a clear: both style) will actually not be nesting <div>'s properly but someone has tweaked the CSS so that it works by voodoo. Actually looking at the borders of your elements helps a lot and doing this in CSS means you don't have to touch your real markup or your main CSS in order to turn the borders on for debugging.