More Web Design Tutorials

Creating a Basic, 3-column, Center-aligned Fixed Width Layout with HTML and CSS

March 18, 2011

The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.

So let’s start with our basic HTML to put all the parts on paper — or in our case, on line. This is the basic outline of what’s between the body tags:

<div id="wrapper">
 
	<div id="header"></div>
 
	<div id="column-left"></div>
 
	<div id="column-center"></div>
 
	<div id="column-right"></div>
 
	<div id="footer"></div>
 
</div>

For the entire HTML code – to include some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers offer that feature.

And of course what we get, is NOT a 3-column layout. It’s just one division on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!

First, and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the finer details Center-aligning a Website right here already. Here is the CSS that does that:

* {
	margin: 0;
	padding: 0;
}
 
#wrapper {
	width: 980px;
	background: silver;
	margin: 0 auto;
}
 
#header {
	background: black;
	color: white;
}
 
#column-left {
	background: red;
}
 
#column-center {
	background: yellow;
}
 
#column-right {
	background: purple;
}
 
#footer {
	background: green;
}

(Please note that you should really be using hex or rbg color codes, but for the purpose of this demonstration, color names are just easier to deal with.)

And it looks Like This. Now we just have to get our columns to act like columns and line up next to each other. There are different ways to do this, but I prefer to just float them all. So we’ll give them all a width and add float: left; to our three columns:

#column-left {
	width: 250px;
	float: left;
	background: red;
}
 
#column-center {
	width: 480px;
	float: left;
	background: yellow;
}
 
#column-right {
	width: 250px;
	float: left;
	background: purple;
}

At this point, it’s important to be aware of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any actual space among us. So just as you can place a box under a balloon without the two affecting each other’s space, our footer will act like the floated divisions are not even there, and line itself up neatly right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:

#footer {
	clear: both;
	background: green;
}

and now the whole thing looks Like This. And there you have it!

A few things can go wrong, and here is some easy, preliminary damage control: If you see your columns NOT all sitting next to each other, it’s likely because the total sum of all their widths, paddings, and margins combined is GREATER THAN the width of their containing wrapper. So put one of your columns on a diet and cut its width down some – and things should fall into place beautifully. And if not, ask for help at the Killersites Community.