float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float
box with assigned max-height, box with assigned max-height, box with assigned max-height, box with assigned max-height, box with assigned max-height

In Internet Explorer 7 max-height is supported and gives hasLayout. The above blue box “tries” (thanks to hasLayout) to enclose its floated green child, but its height is limited by the max-height value (which is honoured), so it grows just to that value (independently on its not floated content.)

Any following box interacts wrongly with the float protruding out of the blue box. The content of the red boxes above either overlaps or is overlapped by the float (depending on hasLayout, true for the first red box, false for the second one.) This is not correct. The problem occurs even if the subsequent box has clear:both, indeed adding clear:both to the above test doesn't change anything.

A similar problem occurs when the blue box has an assigned height instead of max-height.

CSS tests home