weird float clear issue

Question

I have a pretty basic layout of a floated div for a left menu container column and a full width non floated div with left margin for the content area.

When i place floated div's into the content area they float and place as expected until i clear the float.

The next line of floats then appears not directly below the previous line, but all the way down below the bottom of the menu column

As you can see below there is nothing special about the layout, but the float issue is driving me nuts :)

<div style="float: left; width: 200px; height: 200px; border: 1px solid red;">
    floated left div
</div>
<div style="margin-left: 210px; border: 1px solid blue;">
    non floated right div containing floated divs inside<br />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
</div>

I have made a jsfiddle to demonstrate the issue; http://jsfiddle.net/jP6e9/

Answer 1

This is one of those quirky situations where you need to use overflow:auto to get what you want.

<div style="margin-left: 210px; border: 1px solid blue;overflow:auto;">

jsFiddle example

You need to trigger block formatting context by using the overflow property in conjunction with the float property.

See also: http://www.w3.org/TR/CSS21/visuren.html#block-formatting, http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/, and How does the CSS Block Formatting Context work? for some good info on block formatting context.