IE Margin Transference Bug

IE will transfer or duplicate a bottom margin from a static element to below a float. Each example has a clearing div of height:10x.

Div after a float in the source

Float left
Div with margin-bottom:100px
Float left with height:100px
Div with margin-bottom:100px

The above two examples show the same as standard complaint browsers, but in the next example, because the float is of greater height than the margin-top of the element above, IE now decides to transfer/duplicate the margin. This does not happen in standard compliant browsers.

Float left with height:200px
Div with margin-bottom:100px

Div before a float in the source

In the next four examples, the wrapper with the grid background will extend down by 100px. This does not happen in standard compliant browsers. The grid background is also not stable (try moving a window over).

Div with margin-bottom:100px
Float left
Div with margin-bottom:100px
Float left with margin-top:100px
Div with margin-bottom:100px
Float left with margin-bottom:100px
Div with margin-bottom:100px
Float left
Float left with clear left and margin-top:100px

In the next example, the wrapper with the grid background has a top and bottom padding of 25px. Now IE renders the same as standard compliant browsers.

Div with margin-bottom:100px
Float left

Div containing a float

Div with margin-bottom:100px
Float left
Div with margin-bottom:100px
Float left with height:100px

Back to CSS Class.