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

back to introduction

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

• IE 5 Mac: display:table-cell is not supported. The browser will drop the content of the block out of its container (positioning the content below the container as an anonymous box, and loose all formatting).
• IE 6 & 7 Win : display:table-cell is not supported. In order to establish a new block formatting context, elements must gain ’haslayout’ — see On having layout. {zoom:1} is used here. This will not necessarily result in a similar display as more compliant browsers.
• These simple test cases work fine in iCab 3 (beta 382), Firefox 1.0.x and newer, Opera 7.54 and 8.0x, Mozilla 1.0 and newer, Konqueror 3.x.
• All versions of Safari and Webkit have very serious problems. In the above test cases, the <div> is moved upwards, placed above the first block of contents. It does establish a new block formatting context however. In the second case, the two paragraphs, WebKit based browser format it as two different table-rows (expected: two cells, side by side). (these issues are mostly fixed in Safari 4 and newer)
• Margins on the paragraphs are (correctly) ignored and an anonymous block is generated wrapping around the 2 <p>. All browsers with more than reasonable CSS 2.1 support should ignore all margins on the blocks with display:table-cell.

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

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