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.