Creating a basic, 2-column, center-aligned fixed width layout with CSS
March 18, 2011
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> |
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, like so:
<body> <div id="wrapper"> <div id="header"> ... </div> <!-- This closes the wrapper division --> </body> |
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.
