An example of fluid tableless design

Left bar

This is a fluid* column meaning that it expands to exactly 20% of the available width in the body.

* to test this fluid layout, resize your browser window and you'll notice that the column sizes will shrink/grow accordingly.

Middle bar

This middle column is fluid* as well accommodating 70% of body's width ideally to display more info in the middle - a traditional blocked layout of many portal-like websites.

One of the main arguments to use tableless design is to separate markup from style which, if used smartly, should improve the overall experience, including speed.

Right bar

This is a fluid* column meaning that it expands to exactly 20% of the available width in the body.

Back to the article

W3C XHTML valid   Valid CSS3   This page validates as tableless design