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.