Tableless Layout with CSS
Xah Lee, 2007-10.
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”. 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, but the above are the gist.
References:
