WWW FAQs: How do I create a three-column CSS layout?

2007-03-02: A three-column layout is a popular design because it allows space for navigation on the left, content in the middle, and advertising on the right. But how do we create one of our own?

Of course we'll use CSS to create our layout. This is 2007, and we don't have to rely on tables to do our layout for us. But how do we do it correctly so that all modern browsers display the layout well? And what choices do we need to make first? Those are the issues I'll cover in this article.

Fixed-width and variable-width layouts

There are two major types of three-column layouts: fixed-width and variable-width, or flowing. In a fixed-width layout, everything remains the same size, no matter how large the user's screen is. Such layouts have the advantage of predictability, but they don't make good use of big screens.

Variable-width, or flowing, layouts naturally grow and shrink with the size of the browser window. Although this takes a bit more thinking to do well, there are major advantages. It's possible to design a layout that looks acceptable on small screens, but also uses the full screen width to display content on larger screens. Try shrinking the browser window on a page of this type and you'll see that the content "re-flows" to fit the available area. Make it larger and you'll find that the content gains more space for text, and the navigation and advertising areas gain a bit more whitespace.

Mixing Variable and Fixed Width Columns

In addition to the fixed and variable-width options, there's one more option worth mentioning: fixed-width "side" columns and a variable-width "main" column. While it's true that CSS doesn't provide a handy way to say "make this column equal to the width of the browser window minus the width of the other two," the CSS float mechanism gives us a way to accomplish that. The left and right columns can be "floated" in the left and right margins of the middle column.

In this article, I'll show how to create all three types of three-column layouts: fixed width, variable width and mixed.

How To Create A Fixed-Width Three Column Layout

A fixed-width layout sounds simple, doesn't it. Since we know exactly how wide we want our columns to be, all we have to do is size and position them accordingly. Here's a simple style sheet for a three-column, fixed-width layout. Here I use a total width of 500 pixels and divide that space among the three columns, leaving a 10-pixel gap between columns for readability.

Some of the CSS code you'll see here deals with centering the layout in the browser window. While a simple three-column layout can be made with just three div elements, one for each column, in the real world most people want their fixed-width layout centered in the window when the window is larger than the layout. So we place our three column divs inside a container div, and we center that container on the page. If you have questions about the centering-related CSS code, see my article how do I center an element horizontally with CSS?

You'll also note that I've included a "heading" area that extends across the entire page, before the three-column layout begins. Many websites feature a "headline" that appears before the three-column layout. This is another way the container div is useful. Everything outside of the container div can be positioned independently of it.

Why float: is the key

If we positioned the container with position: relative, we could position the left, middle, and center columns with position: absolute. And that works great... until you want a "footer" below the layout that fills the entire width of the browser window.

Guess what: if you position the left, right, and middle columns with position: relative, you can't create such a footer at all! That's because absolutely positioned CSS elements don't change the "flow" of the rest of the page. There's no way to say "position this footer after the columns," because they don't affect the main page layout.

To put it another way: the width and height of the container div do not reflect the width and height of absolutely positioned elements inside it.

So, are we stuck? No way! We can use float: to solve the problem.

The float: CSS property "floats" an element at the left or right edge of its parent, "flowing" the text of the parent element around the edge of the floated material.

Normally, this wouldn't work for us... because it only works until we run out of text in the floated div. When that happens, the text of the main column takes over all of the horizontal space again.

However, if we set left and right margins for the main column that equal the total space taken up by the floated left and right columns, our problems go away! Why? Because floated elements use margin space when it is available... and when the floated elements run out, the margin is still there to keep the text of the main column from "flowing" into the space reserved for the left and right columns.

One more important detail: what if the main column runs out of text before the left and right columns do? Then we still have two floated columns, and the footer appears in the limited horizontal space of the main column. Not what we want.

How do we fix it? By specifying the clear: both CSS property for our footer. The clear: both property ensures that our footer element appears after any elements which are floated at the left or the right, which is perfect for our needs. It is also possible to clear only the element on the left or the element on the right.

The Catch: Columns Must Appear In The Right Order

float: is the best solution to the problem. But there's one annoyance you'll have to deal with.

Because floated columns begin "floating" at the point in the parent element's text where they first appear, your HTML page must contain the left and right column div elements before the middle column. This means that the layout is "order-dependent."

In an ideal world, CSS would not be order-dependent— the order of the divs in the HTML page wouldn't matter at all, and only our choice of style sheet would have any impact on the appearance of the page. But here in the real world, if you want the benefits of a three-column layout and a full-width footer... well, you'll just have to put up with one tiny ordering requirement.

Padding and Internet Explorer

We'll want to provide a little bit of whitespace (padding) at the right edge of the left column, and the left edge of the right column, so that we can read them easily. This is easy enough to do with the padding CSS property.

Unfortunately, Internet Explorer interprets this property differently than other browsers. Specifically, although the standards say that padding should be in addition to the width of the element, by default Internet Explorer subtracts the padding from the width of the element, resulting in an inconsistent appearance.

Fortunately, modern versions of Internet Explorer will respect the standard in this area if we specify a "strict DOCTYPE." In English, this means that if our HTML begins with an announcement that we want to follow the strict HTML standards, then Internet Explorer will stop running in its old "quirks mode" and play by the rules. So we'll use strict mode for this document.

You don't have to use strict mode to take advantage of this article— the core techniques shown here will work without it. But be aware that padding will behave differently between browsers if you don't.

Three-Column Layout, Fixed Width, Header and Footer

I've created a working three-column fixed width layout as an example. Click here to see the three-column, fixed-width layout in action (opens in new window or tab).

Ready to try it on your own site? Great! Place this CSS code in the file threefixed.css:


body {
  text-align: center;
}

.heading {
  text-align: center;
}

.container {
  width: 500px;  
/* Centering for IE6+ in strict mode,
Firefox, and other modern browsers */
margin: auto;
/* Don't center every line of text -
we inherited this setting from body */
text-align: left;

}
  
.left {
  float: left;
  padding: 0px 10px 0px 0px;
  width: 90px;
}

.middle {
  top: 10px;
  margin-left: 100px;
  margin-right: 100px;
}

.right {
  float: right;
  padding: 0px 10px 0px 10px;
  width: 90px;
}

.footer {
  padding-top: 20px;
  text-align: center;
  clear: both;
}

Now to try it out! Place the following code in the file threefixed.html, which should be in in the same folder with threefixed.css (if not, just change the URL in the link element accordingly):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="threefixed.css" rel="stylesheet" type="text/css">
<title>My Content</title>
</head>
<body>
<div class="heading">
<h1>This headline can use the entire browser window width</h1>
</div>
<div class="container">
<div class="left">
Navigation<br>
Links<br>
Go<br>
Here
</div>
<div class="right">
Advertising<br>
Links<br>
Go<br>
Here
</div>
<div class="middle">
Her. And in the wood, where often you and I, Vpon faint Primrose beds, were wont to lye, Emptying our bosomes, of their counsell sweld: There my Lysander, and my selfe shall meete, And thence from Athens turne away our eyes To seeke new friends and strange companions, Farwell sweet play-fellow, pray thou for vs, And good lucke grant thee thy Demetrius. Keepe word Lysander we must starue our sight, From louers foode, till morrow deepe midnight.
</div>
</div>
<div class="footer">
<b>This is the footer.</b>
Let not unto the marriage of true minds
admit impediments. Love's not time's fool, which bends with the
remover to remove.
<p>
From the article <a href="/newfaq/creating/threecolumnlayout.html">how do I
create a three-column CSS layout?</a>
</div>
</body>
</html>

When you visit threefixed.html, you'll see a headline, and below it three fixed-width columns positioned at the center of the browser window. You can adjust the width and position of the left and right columns by changing the left and width styles. Just make sure to set the width style of the container class to reflect the total width of the entire layout. Otherwise centering won't work properly in web browsers that follow the CSS standard correctly. The middle column, of course, has the width of the container minus the widths of the left and right columns (including their padding).

How To Create A Variable-Width Three Column Layout

A variable-width or "floating" layout isn't much trickier than a fixed-width one. And we can use the same HTML page! One of the goals of CSS is to separate content from presentation, and this is a good example of that.

I've created a demo for this layout as well. Click here to test-drive the three-column, variable-width layout (opens in new window or tab).

To put it on your own site, just create the file threevariable.css, containing the following CSS code:


.heading {
  text-align: center;
}
  
.left {
  float: left;
  padding: 0% 2% 0% 0%;
  width: 14%;
}

.middle {
  top: 10px;
  margin-left: 16%;
  margin-right: 16%;
}

.right {
  float: right;
  padding: 0% 0% 0% 2%;
  width: 14%;
}

.footer {
  padding-top: 2%;
  text-align: center;
  clear: both;
}

You'll notice that the variable-width layout code is actually simpler! That's because we don't have to worry about centering. Since we know that the middle column will occupy the entire browser window, minus the margins in which the floated left and right columns dwell, there's nothing to center. Therefore the container div needs no special styling here.

We could explicitly specify width: 100% for our container, but we don't have to. That's because block elements like div default to 100% of the browser width.
Now, copy threefixed.html to threevariable.html, changing the link element so that it refers to threevariable.css instead of threefixed.css. Then load threevariable.html to see the difference. Resize the window horizontally to see how the percentages play out.

A Mixed-Width Three-Column Layout

As I mentioned, there's one more type of three-column layout worth looking at: the mixed-width layout. Here we give the left and right columns a fixed size in pixels, and allow the middle column to occupy the remainder of the page. The main advantage of this type of layout is that your content can still take advantage of all available space, while your navigational and advertising elements can respect the expectations of advertisers and others who might insist on including fixed-width elements in your page design.

Mixed-width layouts are simple: we use the same general layout technique as the variable-width layout, but with pixels rather than percentages. As with variable width, we don't need to worry about centering because we know the main element will occupy all of the otherwise unclaimed space.

Yep, there's a demo for this layout too! Click here to see the three-column, mixed-width layout (opens in new window or tab).

Here's threemixed.css, a three-column mixed width layout with header and footer:


.heading {
  text-align: center;
}
  
.left {
  float: left;
  padding: 0px 10px 0px 0px;
  width: 90px;
}

.middle {
  top: 10px;
  margin-left: 100px;
  margin-right: 100px;
}

.right {
  float: right;
  padding: 0px 0px 0px 10px;
  width: 90px;
}

.footer {
  padding-top: 10px;
  text-align: center;
  clear: both;
}

And that's it! You're ready to create fixed-width, variable-width and mixed-width three-column layouts, complete with headers and footers. Enjoy.

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.