tests: containing floats with the overflow property.

back to introduction

code

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

p.overflow-pH { background:#ccc; overflow:hidden;}
p.overflow-pA { background:#daf2e8; overflow:auto; }

.innerfloat {float:right; background:blue; color:#fff; width:4em; height:4em; padding:1em; border:thin solid #000}

Notes

• IE 5 Mac: when the overflow property is applied to any element except a div, the element completely collapses and disappears from view.
• IE Win: in order to contain the floats, elements must gain ‘haslayout’ — see On having layout. {zoom:1} is used here. IE 7 does not need the additional ‘layout’ trigger.
• These simple test cases work fine in iCab 3 (beta 382), Firefox 1.0x and newer, Safari 1.2 and newer, Opera 7.54 and 8.0x, 9.0 TP1, Konqueror 3.x. Fails in Mozilla 1.0 - 1.3 (the nested floated elements are cropped and partly hidden from view) (untested in Gecko 1.4-1.6). It also works fine for a div in IE 5 Mac. For more complex constructions, extensive testing is required. In a tight layout, iCab and Firefox 1.06 might show scrollbars when overflow:auto is used.

Last modified: May 25 2006 02:53:46 GMT.

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