CSS Layout technique #1: 3 Columns with Header and Footer

This is the most common form of CSS layout used on websites over the internet. This layout is best suited for websites with large content and advertising banners.
I have given a very easy to understand CSS layout technique to plan this layout. You can change a lot of parameters in here and modify it according to your needs.

CSS Code:
.header {
    height: 100px;
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    border-width: 1px;
    border-style: dashed;
    background-color: #C1C1C1;
}
.left_col {
    position: absolute;
    left:10px;
    top:120px;
    width:200px;
    height: 500px;
    border-width: 1px;
    border-style: dashed;
    background-color: #D6D6D6;
}
.center_col {
    margin-left: 220px;
    margin-right:220px;
    height: 500px;
    position: relative;
    border-width: 1px;
    border-style: dashed;
    background-color: #DFDFDF;
    margin-top: 120px;
}
.right_col {
    position: absolute;
    right:10px;
    top:120px;
    width:200px;
    height: 500px;
    border-width: 1px;
    border-style: dashed;
    background-color: #D6D6D6;
}
.footer {
    height: 100px;
    border-width: 1px;
    border-style: dashed;
    position: relative;
    margin: 10px;
    background-color: #C1C1C1;
}
.content {
    margin: 10px;
}
body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: small;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

HTML Code:
<div class="header">
<div class="content">Header Content</div>
</div>
<div class="left_col">
<div class="content">Left Column Content</div>
</div>
<div class="center_col">
<div class="content">Center Column Content</div>
</div>
<div class="right_col">
<div class="content">Right Column Content</div>
</div>
<div class="footer">
<div class="content">Footer Content</div>
</div>

This technique may have some bugs for older browsers but it works fine on all the new browsers.

Technorati Tags: CSS Layout