CSS 3 Column Layout

Using div only, here is a simple way to get a 3 column layout with a div on top for the header or banner. Please note here I have just given certain styles (white background, black border, 450px height etc) to highlight the columns. To make this page look good, you could build it out with css portlets like Portlets in CSS (1) or Portlets in CSS (2)

The basic idea (after the header div) is to create a container div, and then add the 3 columns at your desired width, all set to float:left;. Here is the css:

#container {
width:100%;
padding:0px;
text-align:center;
}
#left {
width:20%;
padding-left:5px;
margin:10px 0 0 10px;
float:left;
text-align:center;
background-color:#ffffff;
height:450px;
border:1px solid #000000;
}
#center {
float:left;
overflow: auto;
width: 55%;
margin: 10px 15px 15px 15px;
text-align:center;
background-color:#ffffff;
height:450px;
border:1px solid #000000;
}
#right {
width:20%;
padding:0px;
float:left;
margin-top:10px;
text-align:center;
background-color:#ffffff;
height:450px;
border:1px solid #000000;
}

Here is the html:

<div class="commercialHeader">
Header/Banner goes here
</div>
<div class="shade"> </div>
<div id="container">
<div id="left">
Col 1
</div>
<div id="center">
Col 2
</div>
<div id="right">
Col 3
</div>
</div>