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.

float block
div, in flow, no new block formatting context

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

div, in flow, new block formatting context with overflow:hidden

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

div, in flow, new block formatting context with overflow:auto

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph, overflow:hidden. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph, overflow:auto. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat


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

Last modified: September 10 2009 03:11:00 GMT.