3 Column Layout

3 columns layouts are made by using 3 divs, all of which which float, and whos widths when added together are less than the available space.

Step 1

Insert 3 divs into your html page, and add some content so you can see them easily.

<body>
<div>This is left column</div>
<div>This is middle column</div>
<div>This is right column</div>
</body>

Step 2

Next, use the id attribute to name the divs. We need to do this so that we can reference each div from the style sheet. Remember, on any one page, each id must be unique.

<body>
<div id="column1">This is left column</div>
<div id="column2">This is middle column</div>
<div id="column3">This is right column</div>
</body>

Step 3

Now it's time for the CSS styles. To reference an id in the html, we use a # in the css. Each column is floated in the same direction - left. The widths of the three columns are less than 100%, so they line up side by side. The background colours are there so that you can see the divs' positions easily.

#column1 {
float: left;
width: 25%;
background: #99CCFF;
}
#column2 {
float: left;
width: 49%;
background: #FFFFCC;
}
#column3 {
float: left;
width: 25%;
background: #FFFFCC;
}

Step 4

If you haven't already done it, add the link from the <head> of the HTML page to the CSS Style sheet.

Step 5

View your page in a browser. It should look like this:

Adding additional content to each div will cause each column to grow in height. This is the structure of many websites, although some sites use a simpler two column layout.