Wolf in Sheep’s Clothing

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

Roger Johansson has a neat quick-tip style article on centering page content both vertically and horizontally by making the html element display: table; and the body element display: table-cell; with vertical-align: middle;. See the full code to make it happen in the article.

I’m down with that. Works in all modern browsers and IE 8 plus.

I disagree on this though:

I’ve seen people saying that using these CSS properties to create “CSS tables” is no better than using tables in your HTML. I don’t agree with that.

Using CSS to change an element’s display properties does not change the semantics of the underlying HTML – it just changes how the element is displayed. It does not turn arbitrary HTML elements into table, th or td elements.

Using display: table; for this little centering trick is no big deal. It affects how the elements are display, stays semantic, all is well. But when you start using CSS tables for layout, you are entering a world of source order dependent layout. Elements that need to be in the top left need to be first in the markup. Elements that need to be in the bottom right need to be last in the markup. Just like regular tables. You wouldn’t use any other positioning to force them the be placed differently, because then there is no point of using CSS tables to begin with.

Floats, as gross as they can be, don’t have this problem. You can swap float values and totally change a layout regardless of source order. The CSS3 flexible box model, as unsupported as it is, allow you to control page position with the ordinal group value.

Using a bunch of divs (or even fancy HTML5 semantic elements) and forcing them to behave like tables is a wolf in sheep’s clothing. And yeah we’ve been down this path before =)