This is mostly a note to myself – I don’t expect it will mean anything to too many others who read this…
I’ve been wrestling with what seemed like strange behavior of Firefox in rendering floated divs in html/css. Internet Explorer behaves in a way that seems to make sense to me, but as it turns out it is not consistent with the W3C standard.
The issue relates to the way the browser renders a non-floated block element that follows a floated element. My understand was that the non-floated block would move to the right of a preceding left-floated block. But it tiurns out this is not the case, even though IE does do this. The standard specifies that only inline content gets wrapped. The relevant description from the W3C is here -
http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#floats
Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn’t enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it.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 the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.
The trick is to know how to interpret the term “block boxes” – because it turns out that if a div containing text follows the float, the behavior depends on whether the div has an explicit width. If it does, it behaves as described in the second paragraph above. The unfloated div box appears on the left (assuming a left float) overlapping the floated box with their tops aligned, but with the contained text appearing below the floated block. On the other hand, if the non-floated div has no explicit width, its box again appears on the left overlapping the floated block, but now the text appears wrapped to the right of the float.