IE7-/Win and Op7-8: Wrong space between a float and a clear caused by an earlier margin

In all the following test cases a (gray) container includes a (red) float, a (green) paragraph, and a blue clearer. Depending on the window width the paragraph beside the float may be shorter or longer than the float.

IE7-/Win and Op7-8 (not Op9) have a problem when the paragraph has a bottom margin and the paragraph plus the margin are shorter then the float. There is a space equal to the bottom margin between the float and the clear, while there should be no space.

float

paragraph beside the float, with 10px margin-bottom. blah blah blah blah blah blah blah blah.

clear
float

paragraph beside the float, with 30px margin-bottom. blah blah blah blah blah blah blah blah.

clear
float

paragraph beside the float, with 0 margin-bottom. blah blah blah blah blah blah blah blah.

clear

All elements except the paragraph have a dimension, so they have Microsoft 'hasLayout'. Adding hasLayout to the paragraph doesn't solve the problem (but triggers the IE float model.)

float

paragraph beside the float, with 10px margin-bottom. blah blah blah blah blah blah blah blah.

clear

The problem disappears adding an empty box (height:0) after the paragraph. Of course this is not a pure CSS fix, since it implies adding something to the markup. So, when possible, is better to rearrange things and get the desired layout avoiding the buggy conditions.

float

paragraph beside the float, with 10px margin-bottom. blah blah blah blah blah blah blah blah.

clear

Similar bugs:

CSS tests home