tests: containing floats with display:inline-block and display:inline-table

back to introduction

Note: this test file illustrates how display:inline-block and display:inline-table can eventually be used as an alternative for display:table in MSIE for Mac.

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 display:inline-block
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 display:inline-table
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

paragraph, display:inline-block. 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.inline-blockdiv {display:table; background:#ffd4cc;}
p.inline-block-p { background:#ccc; display:table;}
div.inline-tablediv { display:inline-table; background:#f2dae3;}

.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:56 GMT.