CSS: 3 Columns Page Layout with CSS

, 2007-10-30, 2010-03-21

This page shows a CSS layout of the common 3-column format. See rendered example here.

Create 3 “div” tags, and set each's width. Here's the HTML code:

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

Here 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.mypanel {
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.

You can also add margin:1ex and or padding:1ex. 〔☛ CSS Margin vs Padding〕

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.