Create a 3-column layout with CSS div by www.gitarani.com

For this design we can nest two-column layouts to create more columns. Below is an example on this.

Below is your html structure.

<div id="body">
    <div id="header"></div>
    <div id="main">
        <div id="column-1"></div>
        <div id="column-2">
            <div id="column-2-1"></div>
            <div id="column-2-2"></div>
        </div>
    </div>
    <div id="footer"></div>
</div>

Let's explain all these page elements.

#body: A container element used to control the overall width of the layout and to center it horizontally
#header: A place to put your normal header stuff. It?s not actually part of the 3-column layout, but included here to make the layout a ?complete? page.
#main: The element that contains the content that will be displayed in columns. No CSS is applied to it in this tutorial, but it often comes in very handy when it?s time to add more advanced styling to your layout.
#column-1: The element that will become the left column. This will often be a vertical sub menu.
#column-2: A container element for the middle and right columns.
#column-2-1: The element that will be the middle column. The main content normally goes here.
#column-2-2: This element will be the right column, often used as a ?sidebar?.
#footer: Your footer stuff goes here. Like #header, this is not part of the columns but included for the sake of completeness.

Structure of your CSS
========================

html,
body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
}
#body {
    width:960px;
    margin:0 auto;
    background:#ddd;
}
#header {
    padding:10px;
    background:#fdd;
}
#column-1 {
    float:left;
    width:220px;
    padding:10px;
    background:#bfb;
}
#column-2-1 {
    float:left;
    width:460px;
    padding:10px;
    background:#ddf;
}
#column-2-2 {
    float:right;
    width:220px;
    padding:10px;
    background:#dff;
}
#footer {
    clear:both;
    padding:10px;
    background:#ff9;
}