Load the layout test: fast/block/float/multiple-float-positioning.html The layout will be correct, the red boxes will not interfere with the text in the green box, although the borders will overlap. Make the font bigger a couple of times (it takes 3 for me). Once the last word ("text") goes on its own line, the red boxes move up and interfere with the text, pushing the word to the right.
So this seems like a text-scaling issue, no? The current text-scale is not taken into account by all layout calculations perhaps?
(In reply to comment #1) > So this seems like a text-scaling issue, no? The current text-scale is not > taken into account by all layout calculations perhaps? > No it's not. If you add "body { font-size: 28px; }" to the <style> element you get the same result.
There's nothing wrong with this result. It's exactly what you'd expect. The floats occur after the word "text." That means they can and will sit on the same line if possible. At certain sizes, there is enough space available, and so the first left float is able to co-exist on the same line as "text." The basic rule here is that floats should be positioned as high as possible, without occurring on a line prior to where they are declared. Firefox and IE both bungle this rule and often put floats on the line *below* where they are declared. See section 9.5.1 of the CSS2.1 spec. http://www.w3.org/TR/CSS21/visuren.html#float-position In particular rule 6 effectively defines the highest point of the float and rule 8 establishes that the float should be on the same line.