Three columns using Tables

The One True Three-Column Layout

Primus

Secundus

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tertius

Baalbek

This layout has (or should have) the following properties:

If the page is made narrow, the center column shrinks, but the outer columns stay the same width.
No scroll bar appears until the center column is at its minimum width.
If the page is made wide, the center column never expands beyond a certain width (which is relative to the font size) and the table remains centered on the page.
If the default font size is changed, the widths of the first and second column change proportionally, but the third column stays at the same pixel width (unless the font size is made so large the text overflows).

In CSS, the only sorts of elements that both have shrink-to-fit sizing on them and also can be centered with margin-left: auto is tables (floats and inline-blocks are also shrink to fit, but for them auto margins mean a zero margin, see Table width layout in CSS2.1

We can't, as far as I can see, do this just with CSS, without using the display:table and display:table-cell properties. See 3colscss.html. Only drawback is that this doesn't work in IE6, which doesn't implement these attributes, though it seems to be OK in Mozilla, Konqueror and Opera.

Also see The One True Five Column Layout