I was referred here from stackoverflow as my question was apparently too broad.
I’m working on a template, and I know using CSS is preferred over HTML tables for positioning… But, is it acceptable to get the best of both worlds and use table-like styles on my divs? For example:
display: table;
This not only helps solve the sticky footer problem, but it also avoids the pains associated with using floats. Somehow it feels dirty, but I can’t logically explain why because it works without any “tricks” or ugly hacks, which is how it should be, right?
Is this technically incorrect, or does it ultimately boil down to just a matter of opinion? …Thoughts?
3
Using tables for layout is discouraged because it is semantically wrong — table markup is supposed to be for tables and specifically for tabular data. Your HTML says what something is (e.g. a table, a paragraph, or a generic text division) CSS is just instructions for displaying it.
If it’s consistent across browsers that are important to you, whether it’s displayed as a block or a table is no different than whether it’s displayed in red or green. Table and table-cell display properties are often cited as good methods for dealing with problems like vertical centering.
IE7 doesn’t support ‘display: table’, so you can only use it for IE8 and up. Other browsers handle it fine, mostly.