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.
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.