tests — block formatting context adjacent to float: using display:table

back to introduction

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

code

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

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

Notes

• IE 5 Mac: display:table is not supported. A possible alternative is the use of display:inline-block or display:inline-table.
• IE Win: display:table 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.
• Konqueror 3.x: in this test file, the elements with display:table and the html table slide under the floated block. More odd, the paragraph between the two elements with display:table also slides under the floated block. Some debugging showed that this is caused by the linked style sheet having a title attribute assigned. Removing that attribute, and the browser works correctly, as illustrated by this test case. The computed width of the elements appear to large, however.
• These simple test cases work fine in iCab 3 (beta 382), Firefox 1.0x and newer, Safari 1.2 and newer, Opera 7.54 and 8.0x, 9.0 TP1, Mozilla 1.0 and newer. Older Webkit based browsers (v85, 1.1) have serious problems (the contents of the element flows under/over the floated block).
• There is a difference in handling the left and right margins on the elements with display:table. Safari and Opera (and IE Windows) do one thing, Gecko based browsers and iCab do something else: Safari and Opera collapse the left or right margin, although they correctly compute the width of the element. This is correct, according to Section 9.5 (previous versions of the spec, up to the working draft released in November 2006 required no overlap between the margin-boxes; see the introduction for the details).

Last modified: May 24 2010 03:10:37 GMT.

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