Floating box question

why in FF it's out of the flow, but not in IE?

[Storyman]

I'm trying to better understanding the float attribute, but get stumped by the difference in IE6 and FF's behavior.

There is a basic container:

.container {
border: 1px dotted #BAB9B8;
width: 800px;
overflow: hidden;
margin-bottom: 20px;
}

Inside the container is .floatLeft and .box:

.box {
background: #FFFCC4;
border: 1px dotted #BAB9B8;
width: 200px;
height: 100px;
margin: 20px;
}

.floatLeft {
float: left;
}

Here is the code to display the boxes:

<div class="container">
<div class="floatLeft box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

What happens in FF is that only two boxes are visible because Box 1 is covered by Box 2--as a result of Box 1 being taken out of the flow. Problem is that IE does not take it out of the flow and all three boxes are displayed. (For now I'm not concerned about the way IE6 handles margins, just the flow.)

If FF handles .floatLeft correctly what can be done to rectify the IE issue?

[edited by: Storyman at 8:25 pm (utc) on July 26, 2006]

[Fotiman]

Actually, maybe I'm wrong here, but that looks like a Firefox bug to me.

What happens in FF is that only two boxes are visible because Box 1 is covered by Box 2--as a result of Box 1 being taken out of the flow.

That's not what I'm seeing. What I'm seeing is that box 3 is overlapping box 2.

Problem is that IE does not take it out of the flow and all three boxes are displayed. (For now I'm not concerned about the way IE6 handles margins, just the flow.)

All 3 boxes SHOULD still be displayed. From the CSS 2.1 spec [w3.org] (emphasis added is mine):

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for margin box of the float.

If FF handles .floatLeft correctly what can be done to rectify the IE issue?

Again, I'm not convinced FF is behaving correctly. It is behaving correctly in that it pushes the 2nd box to the next line, but not correctly by putting box 3 over box 2.

Note, I think the reason box 2 gets pushed down is because it has a left margin of 20px. That margin means it's 20px from the container's left edge. Since the floated box takes up at least 100px, box 2 is pushed down below it.