Collapsing Margins

two blue divs (with margin:30px and 40px) wrapped in a green div (with margin:20px), wrapped in a red one

green div has a border

IE7-/Win behavior depends in part on the hasLayout property of the divs. In the next example both the red and the green divs have hasLayout. Different results occur in other combinations, see IE7-/Win: hasLayout and margins of nested boxes.)

green div has overflow:auto height:50px (Op7 collapses, ok in 8)

green div has overflow:hidden

green div has float:left

blue divs have float:left

first blue div has float:left, second one has clear:both

first blue div has float:left, second one has clear:both, green has a border (Op8- wrong)

blue divs and green div have float:left

green div has position:absolute


CSS tests home