tests — new block formatting context adjacent to float: using the overflow property

back to introduction

The same test, but using float:right instead of float:left.

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; }

div#one {float:left; width:100px; height:200px; border:2px solid lime; background:#f1f1f1}

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 establish a new block formatting context, elements must gain ‘haslayout’ — see On having layout. {zoom:1} is used here. This is not needed for IE 7, in the case of the overflow property, it behaves more according to the specifications.
• These simple test cases work fine in iCab 3 (beta 352), Firefox 1.06 and 1.5beta 1, Safari 1.2 and newer, Opera 7.54 and 8.0x. Opera 9 beta. Fails in Mozilla 1.0 - 1.3 (not tested in Gecko 1.4-1.6). It also works fine for a div in IE 5 Mac. Erroneous handling of horizontal margins in Opera and Safari (margin–box slides under the floated block). The computed width for those elements is correct, but the left–margin should not collapse with the margin of the floated block.

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

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