Monthly Archives: November 2014

Table based layouts without [table]

[div].float is horrid, tables have always been much simpler and predictable just frowned upon due to semantics

A fantastic solution is:

[div style="display:"table"]
  [div style="display:"table-row"]
    [div style="display:table-cell"]

Literally turns [div] into [table]


If you’re only doing a single row, you can omit the table-row element


table-layout: fixed;

To make the cells stay to their widths, instead of being controllable by content inside them, see

Work perfect from IE9 onwards