tests: block formatting context, the overflow property and margin collapsing.

back to introduction

Relevant code

div#testgrid p, div#testgrid div {margin:1em;}
h5 {margin: 1.5em 3% 1em;}

div.inflow {background:#d8ebff;}
div#testgrid div.overflowH {background:yellow; overflow:hidden;}
div#testgrid div.overflowA {background:#ffd4cc; overflow:auto;}

Notes

• IE Win: in order to establish a new block formatting context the elements must gain ‘haslayout’ — see On having layout. The overflow property doesn't trigger ‘haslayout’ by itself in IE 6. IE 7 does not need additional ‘layout’ triggers. Note, the last div loses the bottom margin, see these test files for more problematic variations.
• This works fine in iCab 3 (beta 382) (the bottom margin escapes out of the block), Firefox 1.0x and newer, Safari 1.2 and newer, Opera 7.54 and 8.0x, 9.0 TP1. Fails partly Mozilla 1.0 -1.3 (overflow:hidden fails, overflow auto creates a scrollbar). IE 5 Mac also supports this correctly.

Last modified: September 10 2009 03:10:53 GMT.

• A [ La Chatte Noire ] development area
• [ contact ]
• [ sectionindex ]
• [ Empty Spaces ]