In all the following tests a wrapper (with grey background) contains a float (semi-transparent magenta background) and a not floated box (semi-transparent green background) which may have additional properties, mentioned in the box itself.

1.

— blah
— blah
— no hasLayout
— blah
— blah
— blah
— blah

2.

— blah
— blah
— hasLayout
— blah
— blah
— blah
— blah

3.

— blah
— blah
— width: 50%
— blah
— blah
— blah
— blah

4.

— blah
— blah
— width: 100%
— blah
— blah
— blah
— blah

5.

— blah
— blah
— no hasLayout
— relative
— blah
— blah
— blah

5a.

— blah
— blah
— blah
— blah
— blah
— no hasLayout
— relative
— blah

6.

— blah
— blah
— no hasLayout
— relative
— left: 100px
— blah
— blah

6a.

— blah
— blah
— blah
— blah
— blah
— no hasLayout
— relative
— left: 100px

7.

— blah
— blah
— hasLayout
— relative
— blah
— blah
— blah

8.

— blah
— blah
— hasLayout
— relative
— left: 100px
— blah
— blah

Notes about the IE7-/Win behavior:

  1. When the element following the float has Layout, then it is completely displaced by the float (case 2), instead of being positioned like the float didn't exist, with only the content displaced (case 1, correct in IE7-/Win.) In IE6- there is also the 3px jog problem.
  2. A percentage width on the element following the float (case 3) is computed with reference to the wrapper width in IE6+/standards (correct), with reference to the "available width in the wrapper aside the float" in IE5.5-.
  3. When the element following the float has a width that added to the float width is greater than the wrapper width, then the element drops completely below the float (wrong.)
  4. As a consequence of the previous two points, case 4: in IE5.5- the next element fills the available space next to the float, in IE6-7 drops below the float.
  5. When the element following the float has position relative, in IE6-: it behaves correctly if it is taller then the float (cases 5, 6), it behaves like a hasLayout element if it is shorter (cases 5a, 6a: like a "hasLayout element" means that it is fully displaced by the float instead of overlapping the float.) In IE7 the behaviour is correct.
  6. When the element following the float has position relative and hasLayout it behaves consistently like a hasLayout element (it is fully displaced by the float, starts at the side of the float.)

with right floats

with different hasLayout triggers (min-width, overflow, ...), for IE7

this page in quirks mode

CSS tests home