Three-column Layout Using CSS

This is the header div.

Most of the margins and padding have been left out of these styles in order to simplify the CSS code. These are easy to add in later after you understand how the basic layout works.

Here is the code for the header:
#header {
   border: 1px solid black;
   padding: 5px;
}

This is the sidebarLeft div

Here is the code for the sidebarLeft:

#sidebarLeft {
border: 3px solid blue;
width: 200px;
float: left;
/* fix margin collapsing bug in IE 6 */
display: inline;
}

This is the sidebarRight div.

Here is the code for the sidebarRight:

#sidebarRight {
border: 3px solid green;
width: 150px;
float: right;
/* margin collapsing bug in IE */
display: inline;
}

This is the content div.

Because the sidebarLeft and sidebarRight both use the float: attribute, the order that they are on the HTML portion of the page is important. Both sidebars sidebarLeft and sidebarRight must be typed in as content before the content div.

Here is the code for #content:

#content {
/* 206px for left sidebar and borders */
margin-left: 216px;
/* 150 for right sidebar + 6 for borders + 10 spacing */
margin-right: 166px;
border: 3px solid gold;
padding: 5px;
}

Notice how the margins are calculated. Width, borders, margins, and padding must all be added together to determine where one block ends and another should start.

This is the footer

In order for this to show below each of the columns it is important that the attribute
        clear: both;
be used. This clears the float:left and float:right, so that the footer div block starts on the far left of the page.

Notice the space on either end of this block. This is created  by the margin: 10px attribute. Use the same margin on the sidebarLeft, sidebarRight, and heading in order to have the page look symmetrical.

Here's the essential code for the footer:

#footer {
   margin: 10px 10px 0 10px;
   padding: 10px;
   border: 1px solid purple;
   /* display the footer below both sidebar in case the copy goes deep */
   clear: both;
}