tests — block formatting context, display:table-cell adjacent to float

back to introduction

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 display:table-cell

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

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

paragraph in flow, no new block formatting context. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph, in flow, new block formatting context with display:table-cell. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph, in flow, new block formatting context with display:table-cell. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

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

code

div.tablediv {display:table-cell; background:#ffd4cc;}
p.table-p { background:#ccc; display:table-cell;}
table {background: #daf2e8;}

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

Notes

Last modified: May 24 2010 03:39:03 GMT.