How to create a 3-column layout with CSS

One of the most visited pages on this site is the Simple 2 column CSS layout tutorial, where I
explain how to create a basic 2-column CSS layout with floats. Many readers have asked for a
similar tutorial on how to create a three-column layout, and Ive been meaning to write one for a
few years.
Well, I finally took the time to do it. Three-column CSS layouts have been explained many
times, in many different ways, by many people already, so there is nothing (or at least not much)
new here. Its also something that Im pretty sure that most regular readers can do in their sleep.
Regardless, there are many people looking for this info, and its convenient to be able to refer to
an explanation of how I normally create 3-column CSS layouts with a method that I find robust.
This will not describe a magic bullet layout that works no matter which order your content is
in the HTML. While being able to switch column order around without changing the HTML
makes for a neat CSS demo, it has accessibility issues since it is potentially confusing to people
who do not use a mouse when the content order in the HTML does not match that of the visual
layout. So I prefer to avoid layouts where the display order is different from the content order.
There are some other related topics that this tutorial does not go into:

Making the width fluid or elastic. Its easy to do, but to simplify this tutorial Im using
pixels for widths.

Exactly how the method for clearing floats that I use works see How To Clear Floats
Without Structural Markup for an explanation.

Making the columns full-height, either for real or by faking it.

For this tutorial I wanted to focus on the simple task of nesting two-column layouts to create
more columns. If you happen to be new to CSS layouts, please read the Simple 2 column CSS
layout tutorial first. This tutorial is just an extension of the technique described there.

The HTML structure

So lets get started. The HTML outline you need for this 3-column layout looks like this:
<div id="body">
<div id="header"></div>
<div id="main">
<div id="content-1"></div>
<div id="content-2">

<div id="content-2-1"></div>
<div id="content-2-2"></div>

</div>

</div>
</div>
<div id="footer"></div>

Heres what those elements are used for:

#body: A container

element used to control the overall width of the layout and to center it

horizontally

#header: A place to

#main: The element

#content-1: The element

put your normal header stuff. Its not actually part of the 3-column
layout, but included here to make the layout a complete page.
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 its time to add more
advanced styling to your layout.
that will become the left column. This will often be a vertical

submenu.

#content-2: A container

#content-2-1: The element

element for the middle and right columns.

that will be the middle column. The main content normally

goes here.

#content-2-2: This

#footer: Your

element will be the right column, often used as a sidebar.

footer stuff goes here. Like #header, this is not part of the columns but
included for the sake of completeness.

You could argue that the #main and #content-2 wrapper elements are unsemantic and
unnecessary, and you would be correct for the most part. However, while there are ways of
creating a 3-column layout without the #main and #content-2 wrapper elements, in my
experience using these elements makes the layout more robust and the CSS easier to understand.
The wrapper elements are also very useful when youre applying design to the layout. If you
leave them out you will often end up having to add them anyway in order to achieve the visual
design you want. The only downsides to using them is that they will make the HTML a few bytes
larger and that you wont be able to (easily) rearrange the layout completely without changing
the HTML. In my book, those drawbacks are very minor and far outweighed by the benefits.
With that bit of background out of the way, lets move on to the CSS.
With that bit of background out of the way, lets move on to the CSS.

Step 1: The unstyled HTML

Start by taking a look at how your browser renders the unstyled document with a bit of
placeholder content added in 3-column CSS layout, Step 1.

Step 2: Overall width and some colours

Now lets add a bit of basic CSS to make it easier to see what were doing. The following makes
the entire layout 960px wide and horizontally centered, and gives most of the elements a
background colour:
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
#body {
width:960px;
margin:0 auto;
background:#ddd;

}
#header {
background:#fdd;
}
#content-1 {
background:#bfb;
}
#content-2-1 {
background:#ddf;
}
#content-2-2 {
background:#dff;
}
#footer {
background:#ff9;
}

You can see the results of that CSS in 3-column CSS layout, Step 2. All elements are stacked
vertically in a single column.

Step 3: Create the first two columns

To start creating the columns, well use the technique from the Simple 2 column CSS layout
tutorial by giving #content-1 and #content-2 widths and floating them in opposite directions:
#content-1 {
float:left;
width:240px;

background:#bfb;
}
#content-2 {
float:right;
width:720px;
}

That creates what you see in 3-column CSS layout, Step 3. The #content-1 element now makes
up a column on the left side of the page, while #content-2-1 and #content-2-2 are stacked
vertically on the right side of the page.
The #footer element looks weird at this stage, but that will be fixed later.

Step 4: Create the nested columns

To turn the #content-2-1 and #content-2-2 elements into columns, all we need to do is repeat
what we did in Step 3 give the elements widths and float them in opposite directions:
#content-2-1 {
float:left;
width:480px;
background:#ddf;
}
#content-2-2 {
float:right;
width:240px;
background:#dff;
}

3-column CSS layout, Step 4 now has the three columns we wanted, with #content-1 to the left,
#content-2-1 in the middle, and #content-2-2 to the right.

Step 5: Push the footer down

The #footer element is currently displayed below #content-1, which is not where we want it
to be. There are different ways of pushing it down below the three columns, but the most
straightforward way is to use clear:both:
#footer {
clear:both;
background:#ff9;
}

View the results of that in 3-column CSS layout, Step 5.

Step 6: Clean things up a bit

Were pretty much done at this stage, but to make the final demo page look just a little bit less
ugly, lets give the main containers some padding:
#header {
padding:10px;
background:#fdd;
}
#content-1 {
float:left;
width:220px;
padding:10px;
background:#bfb;
}
#content-2-1 {
float:left;
width:460px;
padding:10px;
background:#ddf;
}
#content-2-2 {
float:right;
width:220px;
padding:10px;
background:#dff;
}
#footer {
clear:both;
padding:10px;
background:#ff9;
}

Note that horizontal padding increases an elements total width, so to keep the same widths we
need to subtract the horizontal padding from the width for each element #content-1 becomes
220px wide instead of 240px since it has a total horizontal padding of 20px. See Box model in
the CSS 2.1 Specification for more details.
As a final touch well also add a class name of cf to some of the elements. This applies a couple
of rules based on the technique described in How To Clear Floats Without Structural Markup.
Doing this makes the layout more robust since any floated elements added later on will be
contained within the elements that these rules are applied to, and it will fix a couple of visual
glitches in IE 6 and IE 7.
The elements that we apply the cf class to are #header, #main, and #footer. This will eliminate
the need for clear:both on the #footer element, so well remove that as well, leaving us with
the final layout in 3-column CSS layout, Step 6.

Simple 2 column CSS layout

This is a tutorial on how to use CSS to create a simple two column layout. If you want to create a
three column layout, read on as this tutorial explains a basic concept that can be used to create as
many columns as you need. When youre done, take a look at How to create a 3-column layout
with CSS.
The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar,
and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not
at all difficult to create with CSS once you know how to deal with the inevitable Internet
Explorer bugs.
To see the full CSS used for each step, view source on the example documents.

1. Basic structure
First of all, we create the basic HTML structure:
1. <div id="wrap">
2. <div id="header"></div>
3. <div id="nav"></div>
4. <div id="main"></div>
5. <div id="sidebar"></div>
6. <div id="footer"></div>
7. </div>
After that, we put some content in the different sections:
1. <div id="wrap">
2. <div id="header"><h1>Document Heading</h1></div>
3. <div id="nav">
4. <ul>
5. <li><a href="#">Option 1</a></li>

6. <li><a href="#">Option 2</a></li>

7. ...
8. </ul>
9. </div>
10. <div id="main">
11. <h2>Column 1</h2>
12. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
13. </div>
14. <div id="sidebar">
15. <h2>Column 2</h2>
16. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
17. <ul>
18. <li><a href="#">Link 1</a></li>
19. <li><a href="#">Link 2</a></li>
20. ...
21. </ul>
22. </div>
23. <div id="footer">
24. <p>Footer</p>
25. </div>
26. </div>
Now we have a completely unstyled HTML document which is structured in a way that lets us
use CSS to control its layout.
View step 1.

2. Adjust the body and html elements

To make the content reach the edges of the browser window, we set the margin and padding of
the body and html elements to zero. We also specify colours for text and background.
1. body,
2. html {
3. margin:0;
4. padding:0;
5. color:#000;
6. background:#a7a09a;
7. }
View step 2.

3. On to the main containers

After that its time to give the content area a width and center it horizontally. We do that by
specifying the width and margins of the main container, #wrap. We also give it a background
colour to make it show up on the page.
The method we use to center the content is based on the fact that when an elements left and right
margins are set to auto, they will share whatever is left when the elements width has been
subtracted from that of its container. In this case the width of #wrap will be subtracted from the
width of the browser window.
Note: for this method to work in Internet Explorer (version 6 and later only), the document must
use a DOCTYPE that forces IE to use its standards mode. Please read Fix Your Site With the
Right DOCTYPE! for more info.
1. #wrap {
2. width:750px;
3. margin:0 auto;
4. background:#99c;
5. }

In case youre wondering why were not using the body element to control the width and
centering of the layout, it is because doing so can cause unwanted side-effects in some versions
of Internet Explorer.
After that, we give the different sections of the document different background colours to make
them show up.
1. #header {
2. background:#ddd;
3. }
4. #nav {
5. background:#c99;
6. }
7. #main {
8. background:#9c9;
9. }
10. #sidebar {
11. background:#c9c;
12. }
13. #footer {
14. background:#cc9;
15. }
View step 3.

4. Place the columns side by side

To make the two columns (#main and #sidebar) display side by side we float them, one to the
left and the other to the right. We also specify the widths of the columns.
1. #main {

2. float:left;
3. width:500px;
4. background:#9c9;
5. }
6. #sidebar {
7. float:right;
8. width:250px;
9. background:#c9c;
10. }
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
This will make #sidebar appear to the right of #main, but the footer is not where it should be.
View step 4.

5. Push the footer down

The footer doesnt get pushed down to the bottom of the content because of the way float
works. When you float an element, it is removed from the document flow and doesnt push
elements that follow it down. In this case #footer will start right below #sidebar.
To avoid this we use the clear property to tell the footer that it cant have any elements next to
it.
1. #footer {
2. clear:both;
3. background:#cc9;
4. }
View step 5.

6. Fix the background colour

Now we can see that the shorter column doesnt continue all the way down to the footer. To
make it look like it does, we use the same background colour for #sidebar and #wrap.
1. #sidebar {
2. float:right;
3. width:250px;
4. background:#99c;
5. }
Also, if you take a look at this step in Internet Explorer 6 you may notice that the background
colour of the footer is pushing up beside the main content. That will be taken care of later.
View step 6.
If you don't know which column is going to be the tallest, and you want both columns to have
different backgrounds and look like they are going all the way to the bottom, you need to use a
workaround. There are several ways to achieve that effect:

Faux Columns

Creating Liquid Layouts with Negative Margins

In search of the One True Layout

7. Make the navigation bar horizontal

contains a regular unordered list of links. Since we dont want it to look like an unordered
list we restyle it.
#nav

1. #nav ul {
2. margin:0;
3. padding:0;
4. list-style:none;
5. }
6. #nav li {

7. display:inline;
8. margin:0;
9. padding:0;
10. }
View step 7.

8. Adjust margins and paddings, and make IE 6 cooperate

Almost done. Time to adjust the margin and padding of some elements to make the layout a
little less cramped.
1. #header {
2. padding:5px 10px;
3. background:#ddd;
4. }
5. h1 {
6. margin:0;
7. }
8. #nav {
9. padding:5px 10px;
10. background:#c99;
11. }
12. #main {
13. float:left;
14. width:480px;
15. padding:10px;

16. background:#9c9;
17. }
18. h2 {
19. margin:0 0 1em;
20. }
21. #sidebar {
22. float:right;
23. width:230px;
24. padding:10px;
25. background:#99c;
26. }
27. #footer {
28. clear:both;
29. padding:5px 10px;
30. background:#cc9;
31. }
32. #footer p {
33. margin:0;
34. }
One thing to take note of here is that when we added padding to #main and #sidebar, we
subtracted the width of the left and right paddings from each elements width. This is how the
CSS box model works for more details on that, see Internet Explorer and the CSS box model.
And the final thing is to compensate for a float bug in Internet Explorer 6. If you look at step 6 in
IE 6, youll notice that the footer is not always being pushed completely below #main. Scroll up
and down a couple of times if you cant see it immediately.

It is very noticeable in this demo because every major element has a different background colour
and everything is really tight. One way of fixing this problem is making sure the footer has an
Internet Explorer concept called Layout. There are several ways of achieving this, but well do it
by using the Star HTML CSS hack to give the footer a height only in IE 6:
1. * html #footer {
2. height:1px;
3. }
As strange as it may look, this does the job. Thanks to another bug in IE, the footer will not be
just one pixel tall, but as tall as its content dictates.
And were done. We have created a simple layout that can be used as a starter for more advanced
layouts.
View the final layout.