«
»

2-Column, Center-aligned Fixed Width Layout with CSS

This type of layout is used a lot, and for good reason. It works.

So let’s start off by looking at the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Andrea Barnett for Killersites">
 
<title>2-Column, Center-aligned Fixed Width Layout with CSS</title>
 
</head>
<body>
 
<div id="header">
<h1>This is the Page Header</h1>
</div>
 
<div id="left-column">
<h2>The Navigation</h2>
</div>
 
<div id="right-column">
<h2>The Main Content</h2>
</div>
 
<div id="footer">
<p>The Page Footer Goes Here</p>
</div>
 
</body>
</html>

Basic Layout Components

I am going to apply a different background color to each division just to make it more obvious where exactly each division is. Colors should be indicated by hex codes – for example #FFFFFF for white or #000000 for black. But for the purpose of this demonstration, I’ll use color names, as it makes things more obvious. So I’m adding the following CSS code to the header:

<style type="text/css">
 
#header {
	background: red;
}
 
#left-column {
	background: yellow;
}
 
#right-column {
	background: teal;
}
 
#footer {
	background: pink;
}
 
</style>

To achieve the fixed width portion of the layout, I’m adding a wrapper division around the entire body html we have so far, and in the CSS, I’m giving this wrapper division a background color just for demonstration purposes – and a width. The width is based on current trends per W3Schools Browser Trends. According to this information, the vast majority of all surfers views at resolutions of 1280 or higher, so I’ll shoot for 1280px. To allow room for the scroll bar and a bit of the (white) body background to show, I’ll set the width of my wrapper at 1200px. The CSS that actually centers everything is a right and left margin of ‘auto’ to the wrapper:

#wrapper {
	background: silver;
	width: 1200px;
	margin: 0 auto;
}

And now we see THIS. Isn’t it just beautiful? The division is centered by this line

margin: 0 auto;

The ‘0′ tells the browser to display a margin of zero for the top and bottom of the wrapper division (that can be changed if you want a top and/or bottom margin) and to automatically calculate the right and left margin so the division will center. But what about the 2-column thing? I’m getting to that!

So we’ve set our wrapper width at 1200px. That means whatever fits inside, cannot be any larger that those 1200px. So I’ll set my left-column division to 300px and the right-column division to 900px. But that does not yet create the 2-column layout we’re working on. In order to achieve that, I have to get the divisions to line up next to each other, and there are several ways to achieve that. For this example, I’ll float the left-column by adding this CSS

#left-column {
	background: yellow;
	width: 300px;
	float: left;
}
 
#right-column {
	background: teal;
	width: 900px;
	margin-left: 300px;
}

and just to make everything more realistic, I’ll add a bit more content to my html, and now we see THIS – this does NOT look quite right. So what’s happening? That’s a topic for a whole other post, but in a nutshell: A floated division is removed from the actual flow of things – kind of hovering over the floor like a balloon, so not affecting the actual floor space. The non-floated divisions, however, do take up ‘floor space’ and fall in place in their natural order. So the footer division follows the content division, ignoring our entire ‘balloon’. There’s an easy fix, so:

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

and voilá – ‘clear: both;’ told our footer division to do just that – clear any floated or non-floated divisions and get in line where it belongs.

And here you go – a very basic 2-column, center-aligned fixed width layout with CSS.

As you get rid of the ridiculous background colors and add your own styling – mainly margins and padding to the right and left column – you will probably find that your lay-out breaks. That is because any right and/or left margin and/or padding adds to the total width of your division. Right now, the wrapper is 1200px wide, same as the total of the right (900px) and left (300px) column. But if you add a 10px right/left padding to the right-column, it’s suddenly 920px wide and no longer fits next to the left column. So you have to adjust the total width of right-column to 880px. Because 10px left padding + 10px right padding plus 880px = 900px. Simple math.

Tags: , ,

This post was written by: Andrea Barnett

This entry was posted on Saturday, February 27th, 2010 at 4:46 pm 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. You can leave a response, or trackback from your own site.

8 Responses to “2-Column, Center-aligned Fixed Width Layout with CSS”

  1. Patricia says:
    February 27, 2010 at 5:10 pm

    This is THE tutorial I have been looking for. So easy to understand and it explains WHY things work. CSS Layouts have been difficult for me because basically I’m an ‘old dog’ who doesn’t like to learn new tricks. Thanks so much for posting.

  2. admin says:
    February 27, 2010 at 5:41 pm

    Nice tutorial!

  3. admin says:
    February 28, 2010 at 5:20 pm

    Hi,

    I wanted to cover little piece of information not mentioned in the article … take a look at this code:

    #wrapper {
	background: silver;
	width: 1200px;
	margin: 0 auto;
}

    If you focus in on:

    margin: 0 auto;

    That basically says:

    1. have 0 pixels on the top and bottom of the page.
    2. automatically figure out the equal distance of margin on the left and right side of the div.

    I hope that helps,

    Stefan

  4. Andrea Barnett says:
    February 28, 2010 at 7:45 pm

    Excellent point, Stefan. I’ll insert this info right into the post so people can see it as they read it.

  5. admin says:
    March 1, 2010 at 3:47 am

    @Andrea,

    Sounds good.

    Stefan

  6. Gary says:
    March 2, 2010 at 12:29 pm

    Hi, excellent tutorial.

    One thing i “need” to know, how do you make the “wrapper” float vertically also? Say I have a background 600px high and I want it to float vertically?

  7. Michael Hall says:
    March 12, 2010 at 12:31 am

    Excellent tutorial and indeed easy to understand.

    can you also give us a tutorial covering the box model issue with IE when you have some spare time? I just can’t seem to wrap my head around that, lol.

  8. Gopal rajawat says:
    April 6, 2010 at 7:16 pm

    Thanks, great tutorials i am looking for this and i got it….

Leave a Reply