tests: containing floats with the overflow property.

back to introduction

div in flow, no new block formatting context
small float

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


div overflow:hidden
small float

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

small float
small float

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

div overflow:auto

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

small float
small float

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

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

paragraph, overflow:auto. small float 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; }

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

Notes

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