I seem to have been overwhelmed by people saying “display: table-cell doesn’t work in IE” recently. Once on IBeBloggin and twice at work, by the other two other web developers (who, incidentally, are working on different projects). All today.
table-cell
does work in IE.
For it to work properly in Mozilla you must have a containing element which has display: table
set. IE just doesn’t care.
I’ve chucked up a working demo here which is based on the code I wrote the first ever time I used table-cell
, namely for the Xurble homepage.
This is a working example of the CSS rule display: table-cell
. There are three spans (marked by red borders) each of which contains an image and has a width ~33% to take up the width of the page.
The containing element is the body
tag which has display: table
set and therefore also needs a width: 100%
rule.
Without an explicitly declared table-row in sight, everything within the element which has display: table
set (in my case the body
) will appear on the same row. For multiple rows you’ll probably need a containing element with display: table-row
for each row.
This is all wrong wrong wrong. See my later post about why.