Table-cell VS float

[smsulliva]

I have a question about best practices when it comes to positioning in HTML5.
I've read here that they are using the display property of table and table-cell.
I also know everyone still talks about using float for positions too. What is the best practices to use?

[JAB Creations]

Tables are only intended for tabular data, in example the nutrition panel on the side of most food products is a good example if you're in America.

If you're formatting the layout of a page you're supposed to use divisible elements. (X)HTML5 has more specific elements for layout though the browser support just is not there yet and won't be for a few more years. However you should definitely use tableless layouts.

Take this code in example...

Code: Select all

<div style="background-color: #dff; float: left; width: 80%;"><p>content</p></div>
<div style="background-color: #ffd; float: left; width: 20%;"><p>sidebar</p></div>

To add padding you add a child divisible element and then add margins to the child, width and float only on the parent.

[Alan]

Another alternative is the CSS3 flexible box model. There's an implementation in JavaScript for legacy browsers, too, though I haven't looked into it.

The new structural elements in HTML5 work cross-browser as long as you style them appropriately (e.g. all unknown elements usually default to display: inline). MSIE < 9 also needs a JavaScript hack to make them respond to styling (the trick is to create instances of each "unknown" element off-screen before the document body is rendered).

display: table-cell has nothing to do with HTML tables, though (other than making the styled element behave like a table cell). The reason you shouldn't use HTML tables for layout lies in their semantics, not their appearance. What CSS you apply to your elements doesn't have anything to do with that.