Part 7. CSS issues and bugs

Double margin bug

One of Windows/Internet Explorer 5's strange bugs is the double margin bug - it doubles the amount of margin applied to left or right margins of a floated item when this item moves against the edge of a container.

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won't show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

The solution:

.floatbox
{
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}