297803 - [CSS] float: left causes firefox to mess up positioning

Status: RESOLVED INVALID

Description

[Stijn Peeters]

User-Agent:       Mozilla/5.0 (Windows; U; Win98; nl-NL; rv:1.7.7) Gecko/20050414 Firefox/1.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Win98; nl-NL; rv:1.7.7) Gecko/20050414 Firefox/1.0.3

When four blocks are sorted in a square of two blocks on the first row and two
blocks on the second row (as on http://dopes-planet.com/~flash/bugs/div.htm,
with the "blocks" represented as <div>'s) using the float: left CSS rule for the
left boxes, firefox renders the top-left box correctly, the top-right box
beneath the top-left box instead of next to it, the bottom-left box is rendered
correctly again, and the bottom-right box seems to be rendered on top of the
bottom-left box, but its content is beneath the bottom-left box.
On Internet Explorer 5.5 and Opera 8.0 the boxes are rendered as they should be
rendered, as can be seen on the second attachment. I couldn't check if this bug
also occurs on other platforms.

Reproducible: Always

Steps to Reproduce:
1. Go to http://dopes-planet.com/~flash/bugs/div.htm with Firefox
2. Go to http://dopes-planet.com/~flash/bugs/div.htm with IE or Opera
3. Compare

Actual Results:  
The boxes were rendered incorrectly as described erlier: the left boxes were
rendered correctly, but the top-right box was on top of the bottom-left box and
the bottom-right box was rendered partly on top, partly beneath the bottom-left box.

Expected Results:  
It should have rendered the four boxes in two rows of two boxes.

Using Windows 98SE and Mozilla/5.0 (Windows; U; Win98; nl-NL; rv:1.7.7)
Gecko/20050414 Firefox/1.0.3.

Comment 1

[Stijn Peeters]

Created attachment 186352 [details]
The wrongly positioned boxes in Firefox

Comment 2

[Stijn Peeters]

Created attachment 186353 [details]
The boxes again, correctly positioned in IE

Comment 3

[Peter van der Woude [:Peter6]]

Created attachment 186358 [details]
testcase from comment #0

Comment 4

[David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-7]

The CSS spec says that floats displace lines but do not displace blocks (at
least blocks that don't establish new block formatting contexts).  IE's
distinction between types of blocks is triggered by use of 'height' or 'width',
which is incorrect.

Comment 5

[Stijn Peeters]

We could argue about that, and maybe you're right. But even then Firefox
shouldn't render the individual blocks on top of each other.