When there is element with overflow hidden, auto, scroll, and that element is inside element without border, the overflowed element is moved inside its parent at the right bottom side after the floated element which have margin. The margin is moving the content after the float. If the margin is removed and the height of the floated parent element is reduced to height of the float nothing is moved. Tested in other browsers: Chrome 4, Safari 4, Opera 10.1, Opera 10.5, IE8. All renders the same way no matter if the parent have border or not. I searched through around 250 bugs for that but couldnt find the same issue, however this could be a duplicate, because its complicated case.

As additional information, the moved element is centered with margin:0 auto and fixed width, thats why there is green outline to show the width.

CSS 2.1, section 9.5 says: The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower. IE7 does this correctly, and we do it after bug 134706 (and bug 427129), but I don't think any other browsers (including IE8) do. I think this is probably related to your testcase, but I don't fully understand the testcase.

(In reply to David Baron [:dbaron] from comment #2) > I think this is probably related to your testcase, but I don't fully > understand the testcase. I just came across the same issue, so here's another testcase which is hopefully easier to understand. If a block formatting context that does not fit next to a float has it's margin-top collapse with the margin-top of the parent element, the block formatting context is not pushed below the float. Instead, it is still placed next to the float. That makes the block formatting context create overflow to the right. IE 8 to 10, WebKit and Opera push the block below the float.^ A long while ago I attached a testcase with a table next to a float that exposed the same issue. You then made me aware of bug 25888. Maybe this is related. ^ Note that in this situation margins should still collapse.

Fixed by bug 478834.