HTML: Tableless Layout with CSS

Xah Lee, 2007-10, 2010-03-21

This page shows a CSS layout of the common 3-column format.

The key CSS attributes that make this possible are: “position”, “width”, “left”, “right”, “top”, “margin-left”, “margin-right”.

The basic idea is this: Create 3 “div” tags with “id” attributes with values “main”, “panel-left”, “panel-right”. Like this:

…
<body>
<div id="main">…</div>
<div id="panel-left" class="panls">…</div>
<div id="panel-right" class="panls">…</div>
</body>
…

Each of these “div” contains the whole content for the left, main, and right columns.

The CSS for these div containers should be like this:

#main {margin-left:20%; margin-right:20%;
 background-color:LightYellow}
#panel-left {left:0; background-color:yellow}
#panel-right {right:0; background-color:pink}
div.panls {width:20%; position:absolute; top:0;}

For the “main”, specify “margin-left” and “margin-right”. This will fix the main panel into a narrow central column. Then, for the left panel, specify a width that is the same as the main's margin-left, and, specify position:absolute; left:0. This will fix the panel on the left side with a fixed width. Similar for the right pane.

The margin and padding of the columns can be made prettier, by adding for example: margin:1ex and or padding:1ex.

Any text that is not in one of the main or panel div container, will be left on the bottom.

Here's a test page you can view source: HTML: Tableless Layout with CSS: test page.