CSS 2 Column Layout

This is based on the CSS 3 Column layout I published earlier tonight so please refer to that posting for any special instructions. The only difference is the center col stretches across the rest of the page. Obviously by simply changing the widths you could have the small column on the right hand side of the page.

The css is identical to the other example save the 3rd column and the width of column 2, here is the code again:

(1 thing I didnt include in the other example was the css for the shade and the header - The shade is just a div of a 1x7 pixel image set to the background to create a shade effect. An example of this can be seen on the page Background Shade Effect on pages )

.header {
width:100%;
background-color:#ffffff;
height:50px;
text-align:center;
}
.banner {
padding:5px;
}
.shade {
background-image: url(../images/shade_gray.jpg);
line-height:7px;
}
#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;
}
/* Content Area */
#main {
float:left;
overflow: auto;
width: 75%;
background-color:#DEE2EA;
margin: 10px 15px 15px 15px;
font-family: Tahoma, Verdana, Geneva, sans-serif;
font-size: 12px;
text-align:center;
background-color:#ffffff;
height:450px;
}

and the html:
<div class="header">
Header/Banner goes here
</div>
<div class="shade"> </div>

<div id="container">
<div id="left">
Col 1
</div>

<div id="main">
Col 2
</div>