Category Archives: HTML

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

XHTML 1.0 Trans DocType

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <link type="text/css" rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>