3-Column-Layout

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.

Tags:

This post was written by:

This entry was posted on Monday, April 12th, 2010 at 12:06 am and is filed under CSS Basics, CSS Page Layouts, Killer CSS Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

11 Responses to “3-Column-Layout”

  1. William Rouse says:

    When I run your example on the four browsers that I use as test cases, IE8, Firefox, Safari and Chrome the bulleted items on the left side of the screen escape the container. How would one pull them inside of the container?
    Thanks!
    WBR

  2. This tutorial only focused on the 3-column layout. However, margins to the ul or padding the containing div would get things in line. Note so if you add padding to the div, you’ll have to decrease its width by the sum of the right and left padding.

  3. William Rouse says:

    Thanks for your response Andrea.
    WBR

  4. Vihar says:

    Dear Andrea,

    first of all, thank you for running this great tutorial site!
    My question is, can I set a pre-defined height for the columns, so when I don’t fill them up with text, they’ll be still showing up with the sizes I want?

  5. Andrea Barnett says:

    That can be a bit complicated, as content likely changes from page to page. Look at Stef’s tutorial here: http://www.killersites.com/blog/2006/matching-div-heigths/

  6. Gina says:

    I have the same basic layout as described in the tutorial, but I have a problem…
    The column-center is my content area, which will be variable in it’s height, so how do I make (or should I) the left and right columns expand accordingly so all three will be the same height?

  7. Gina says:

    To provide more clarity…
    The site is a five page site and each page will hold variable amounts of content in the ‘column-center’ areas. How do I write the coding in the external style sheet to allow for this flexibility with all three columns?

  8. Zachary says:

    New to CSS and wondering what the “*” indicates in the 2nd section of example code above. Here it is in context:

    * {
    margin: 0;
    padding: 0;
    }

    Does the * reference all elements, meaning any that have margin and padding attributes will have 0 as their value?

  9. Andrea Barnett says:

    * is a universal placeholder. It sets the margins and padding to EVERY SINGLE ELEMENT to zero.

    m*.txt, for example, means every single text file that begins with ‘m’.

  10. ardiyasa says:

    thanks andrea this is my 1 i’m trying css very helpful..

  11. Bill Muldoon says:

    I enjoyed this very much. I have taken CSS in college and I have used it quite a bit but CSS is such a behemoth to me. I still have not achieved a level of comfort but having yoru site refresh what I already know is a great thing!