CSS Layout, Div inside Div, float:left

[benmunoz]

Would appreciate some help from CSS gurus.

I have a div inside a div that looks fine, until I add a float:left to the inner div (in order to create a 2 column layout inside the container). There are four levels of nested divs, but the outer two just have a margin and width specified.

This works fine

<div id="content_center">
<h1> The Science Of Dating Is Different </h1>
<p>
</p>
<div id="main_content">
</div>
</div>

and

#content_center {
 background: #ffffff url("/images/content_center.png") repeat-y scroll right center;
 padding: 5px 40px 5px 40px; 
}
#main_content {
 width:620px;
}

Changing to this removes the content_center styling as the browser closes up that div.

#main_content {
 width:620px;
 float:left;
}

Anybody have any ideas what I'm doing wrong? Or even where to start?

[swa66]

A floated element is not part of the flow inside it's parent. if you wan tthe floated element to stretch the parent nonetheless, you need to add somthing after the floated element that is not floated itself and does "clear" the floated element.
Typically a <br class="clear" />
and .clear {clear: both;} will do, but there are solutions that do not require html to be added (search for clearfix, but be aware of the hacks you'll often find associated with them.

[TenTonJim]

Also when you use the clear as mentioned by swa66 - you may have to set a line-height:0 to remove any unwanted spacing in IE... say if it absolutely has to line up on a bottom border or what have you.

[edited by: TenTonJim at 4:01 am (utc) on June 30, 2009]