Two Column Fixed Width Layout
The Two Column Layout is the most popular of layouts I’ve done in the past. This site is even done in the two-column layout - it seems to be the most popular for simple websites. One column - narrow in width, is usually reserved for the sidebar navigation, the secondary column is wider and handles the content of the pages.
An example to view - aside from the page you’re looking at right now:
Basic, basic basic. Now, you can do without the header and /or footer quite easily - but the technique I’m going to describe is for the example layout above - and done entirely in CSS.
That’s right - no tables.
The biggest issue most people have is with bringing one column or the other down to the bottom. Usually, the most common issue is that they can get the layout right, but “for some reason” (as they always say) they can’t seem to bring the offending column background color down to the bottom of the page - thus making it staggered and not flush.
For example:
…or something along these lines will happen.
Now, the method I’m going to show you has been described before in other places, and it’s the one I use the most often, because I find it to be the easiest to deal with. If you use it, great! But don’t take my little tutorial here on the end-all of how to accomplish this layout - believe me, there’s plenty of other ways to do it.
I should also note that this tutorial is for the site that basically has the design centered on the page in a “box” that is no wider than 770 pixels. (This way, people viewing in a resolution of 800×600 can still see the content without a problem.) It is not a liquid layout - save for the content centering itself when the window is resized. However, it is possible to do this so that the header, footer and sidebar are fixed, and the content column stretches to fit the page - in “liquid layout” style.
But this tutorial isn’t about that type of layout…and I will cover that in the future - so watch for it.
Now, all that being said…
I’m going to start with giving you my basic HTML file. This is the “template” I start out with every time I design a site. So here it comes - be prepared.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>
<body>
</body>
</html>
Now, all of those meta tags up there are your personal preference. I like to keep my copyright date and author name in there not so much for SEO purposes, but because…well..
I know there’s been many times I’ve seen a site I love, and there’s things in there that I don’t know “how they did it”. So, when I come across a site like that, I’d like to see who did it so I can 1) look at other sites for inspirational purposes, and 2) possibly contact the designer for a “how did you do that?” question. It’s very disappointing when you can’t find a link to the site’s designer anywhere, so I look at the source code, hoping I’ll find the author’s credit there. Many times, I do not, unfortunately.
So I guess it’s a little pretentious of me to think someone would see one of my sites and hope I left a credit link somewhere. But just in case, I leave it there - ’cause you never know.
As for the image toolbar - I hate that thing. It just bugs the living crap out of me when I go to a website in IE and my mouse happens to be over an image, and that stupid PITA shows up. It just irritates me. The the “MSSmartTags Prevent Parsing” thing…I know they don’t do it anymore, but I still come across sites that have their words hijacked my that stupid trick Microsoft tried to pull a few years ago. I don’t want to take the chance of it happening to my sites, so I prevent it with that tag.
Okay, enough explaining my HTML. But there it is - you’ll see I code in XHTML 1.0 Strict, and I always check to validate both the code and the CSS. What can I say, call me “Lady Farquad”. I strive for perfection. I don’t always get it though…but at least I try.
So, the first thing you should do to achieve the look we’re going for in this tutorial is to create a small gif image - 1 pixel tall by no wider than 770 pixels wide. This gif image will basically be the background color of your choice, but what it’s for is to be the background for both your sidebar and content areas. (Of course, if you want your sidebar to have some kind of pattern or gradient, you can, by all means, make it taller - but please try to make it a tiling background so there are no seams!)
If you’re a visual person, the image should look something like this (note the absence of border color on the left and right):
Now, you will change your HTML file to display this:
<body>
<div id="wrapper">
<div id="header">
</div> <!-- closing header div -->
<div id="content">
<div id="sidebar">
</div> <!-- closing sidebar div -->
<div id="main">
</div> <!-- closing main div -->
</div> <!-- closing content div -->
<div id="footer">
</div> <!-- closing footer div -->
</div> <!-- closing wrapper div -->
</body>
Now, there’s your basic HTML for this. Easy peasy.
What happens is, you have the “wrapper” div, which will encompass the entire content of the site. Think of it as the “skin that holds your insides in” so nothing goes flying off to the left or something. It contains everything in there. The “wrapper” div should be no wider than 770px.
The “header” - self-explanatory. It’s where your header graphic and title/name of site stuff goes. This should be as wide as your “wrapper” div.
Now, the “content” div is where the fun stuff comes in. This, too, should be as wide as the “wrapper” div. However, you want to set the background as the 1 pixel gif mentioned above.
The “sidebar” div should be - well however wide you want it to be. For this example, we’ll use easy math and say it’s 200 pixels wide (which means the dark blue part on the 1 pixel gif should be 200 pixels wide). Float it left. You do this so that the “main” div will butt right up against the “sidebar” div, not fall under it. Oh, and your “main” div should be 570 pixels wide, and floated right.
Now, at this point, you will notice that the “wrapper” div will only extend as far as the header - the bottom of it doesn’t come down below the two lower divs: “sidebar” and “main”. It’ll look something like this:
Note how the “wrapper” div pops up beneath the “sidebar” and “main” areas (of course, the sidebar and main divs wouldn’t be stretched down this far unless you had text in them - but this is to show you what I mean).
This is where the “footer” div comes in. Basically, you create the “footer” div to clear the floats and bring everything down . The “footer” div should be 770 pixels wide. Most people use the footer for navigational links, copyright notices, contact information, stuff like that. If you don’t want a “footer” div, then simply replace this:
<div id="footer">
</div> <!-- closing footer div -->
with this:
<hr class="clear" />
The “hr” tag - after applying certain styling elements to it with CSS - will accomplish the same thing as the “footer” div, but will not be a block that’s visible to the public.
Now, for the CSS (and yes, I’m weird - I like to alphabetize my CSS stuff - makes it easier to find when I need to make changes):
/* --------------- Defaults --------------- */
* {
padding:0;
margin:0;
border:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#000;
background:#eee;
}
/* --------------- Div ID's --------------- */
#content {
width:768px;
background:url("bg.gif");
}
#footer {
background:#cddee9;
border-top:1px solid #000;
width:748px;
padding:10px;
clear:both;
}
#header {
width:748px;
height:75px;
padding:10px;
background:#1f4359;
}
#main {
background:transparent;
width:550px;
padding:10px;
float:right;
}
#sidebar {
background:transparent;
width:180px;
padding:10px;
float:left;
}
#wrapper {
width:768px;
border:solid 1px #000;
margin:0 auto;
}
/* --------------- Classes --------------- */
hr.clear {
clear:both;
display:block;
visibility:hidden;
}
Note the difference in width sizes: 768px instead of 770…that’s because 768 + 2 = 770. the “2″ is 1 pixel border on the left and right. The sidebar width is 180px instead of 200, as mentioned earlier… because 180 + 20 = 200. The “20″ being 10 px padding on the left and right.
Mozilla will “add” in stuff like this - which is why the widths must change.
When you look at this in IE, you will notice that the “main” area has dropped below the “sidebar” - that’s because IE messed with paddings, margins, images and such. You will need to add a conditional comment in your header to mess with those numbers to get it to pop back up. (Apologies, but at the moment, I can’t remember the *exact* number you need to edit it by - but I believe it’s 3 pixels on either side - so “main” would be 544 pixels, not 550.)
And there you have it - your basic needs for a 2-column layout.
Posted by
March 3rd, 2006
