3 Column Layout: Step by Step: Using CSS

To start, let's make a simple three column layout with gaps between the columns, with the center column content dictating the height of the entire document. We will start with four DIVs and their respective style declarations.

1. First we set the margin and padding from the body element with the following code to give the desired appearance. Notice that we need to set the padding because Opera's default is not zero. Also, we set the background color to white, because Netscape 6 for the Macintosh defaults to a background color of gray.

body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}

2. Now we define our first element, a DIV that we will give an id attribute value to "level0." The only style definition for this element will be a background color, the color we want for the left column. Take a look

#level0 {
background:#FC0;
}

3. We nest a second DIV inside "level0" and give it the id "level1" thus.

#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}

This new DIV is going to make the space for the left column and left separator. The left column area will be reserved using a left margin for "level1" and the separator using a left padding, so we will need to set the background color from "level1" to the desired color for the separator. Take a look
4. We nest inside "level1" a DIV with id "level2".

#level2 {
background:#FFF3AC;
}

We only change the background color of this new DIV. Now we can see clearly the left column and its separator. Take a look
5. We use the same technique, nest a "level3" DIV inside "level2" to get the visual layout for the right column.

#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}

This time we will nest another DIV called "main" just to set its background color different from transparent, and so we can highlight the columns and the separators