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]

Also

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

Also

table-layout: fixed;

To make the cells stay to their widths, instead of being controllable by content inside them, see
http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Work perfect from IE9 onwards

XHTML 1.0 Trans DocType

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
  </head>
  <body>
  </body>
</html>