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

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)

Answers


You can do it strictly with CSS using overflow:hidden

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

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


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.


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.


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.


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.


Need Your Help

cakephp migrations database rollback

php cakephp cakephp-1.3 php-5.3

I'm using migrations in cakephp to keep track of changes in my database. Let's say that I create a field in a table in the database and then I realize later on that I won't really need that field. ...

AjaxControlKit in .NET 2.0 from Visual Studio 2008

.net asp.net .net-3.5 asp.net-ajax ajaxcontroltoolkit

I am working on a project which was developed in Visual Studio 2005 (.NET 2.0). I have Visual Studio 2008 and on opening the solution the files are converted to older framework.