tests — new block formatting context adjacent to float: using display:inline-block and display:inline-table

back to introduction

code

div.inline-block-div {display:inline-block; background:#ffd4cc;}
div.inline-table-div {display:inline-table; background:#f2dae3;}

p.inline-block-p { background:#ccc; display:inline-block;}
p.inline-table-p {background: #daf2e8; display:inline-table;}

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

Notes

• see upcoming notes on display:inline-block
• IE 5 Mac: has experimental and partial support display:inline-block is supported.display:inline-table is also supported.
• IE Win: inline-block is partly supported, resulting in an element establishing a new block formatting context by gaining ‘haslayout’ — see On having layout. The element is otherwise treated as block, it doesn't have any of the characteristics of an inline-block element.
• display:inline-block and display:inline-table are not supported yet by Gecko browsers.
• Other browsers give conflicting test results. IE Mac, Safari 1.2 and newer display this test correctly. Opera 7.54 and 8.0x, 9 beta and iCab drop all elements below the floated block. Konqueror (3.5.2) handles the element with display:inline-block correctly, but the element with display:inline-table clears the float. (Investigate) — It does work correctly in those browsers when the element has a width assigned; when the width is auto, however, and hence dependent on the content and the UA's algorithms for shrink-to-fit, the element expands to the full width of parent element, ignoring the space taken up by the float. This seems to contradict the rules for width, especially where line-boxes are mentioned. The line-box should be shortened to make space for the floated block.

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

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