3 Column All CSS Layout With Fluid Center and Two Columns

on Sat Jul 05 08:37:19 GMT 2008 in XHTML and CSS and viewed 116399 times

A response to the amount of 3 column css fluid width layout tutorials. This will make a 3 column layout with a fluid center and two fixed width sidebars. Uses only 3 divs for the columns and shows how to accurately use the float technique.


3 Column CSS Layouts always seem to be the most sought-after by web designers. To create a layout with three columns, including two fixed width sidebars and a fluid center and not using tables seems to be, as A List Apart’s Matthew Levine put it, The Holy Grail in his article on this.

While I was looking over the article, I thought I could make it easier for you, the common web designer to do it easier and without so many browser hacks. So spawned this tutorial. In this tutorial, you will be creating a valid XHTML 1.1 Strict and valid CSS layout with three columns, and no IE, Firefox, or other browser hacks.

The finished layout can be found here.

Basics

So to start, we need to define the basic page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>3 Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
</style>
</head>
<body>
</body>
</html>

This should all be very basic. The doctype will be XHTML 1.1, and the rest should be obvious.

The first thing we will be doing is modifying the basic styles. In between the <style></style> tags, add:


* { margin:0; padding:0; }
BODY { background-color:#651; }

The Header

The next thing that most websites have now is a header. It seems to be a staple for websites, to have your saying and website name in a header at the top. So we’ll go ahead and create that.

So to create the header, the style will be an id with two rules.


#header { background-color:#BFAC60;
padding:8px; }

This has a background color of kind of a darker gold. And you should add some padding to create some readability.

The HTML is just as easy.


<div id="header"><h1>3 Columns - 3 Divs</h1></div>

It’s a simple <div> element with an id of header. Notice we did not have to add another rule for the header (h1). We already said in our first rule that all elements have 0 margin and padding, which is my pet peeve with headers. And that’s a very easy header. It extends across the browser page.

The Columns

Now we get to the fun part. To actually make the columns.


<div id="left">Float Left</div>
<div id="right">Float Right</div>
<div id="center">Center Content</div>

The HTML is very simplistic. Three divs. One with an id of left, one with an id of right, and one with an id of center. This makes it so much easier to manage for you than crazy wrappers and everything.

The CSS, however, is still very easy.


#left { float:left;
width:200px;
padding:8px;
background-color:#dc8; }
#right { float:right;
width:200px;
padding:8px;
background-color:#dda }
#center { margin-right:215px;
margin-left:215px;
padding:8px;
background-color:#eec; }

Allright. We’re going to use floats for this layout. Floats in CSS force an element to either the left or the right. Here we must make the floats go above the actual center. We can’t make the divs in order of left, center, right, or right, center, left. It must be left, right ( or right, left) then center. The reason is that floats will be forced to its side, and if it’s in the wrong order, it’ll either come before or after it’s supposed to.

Anyways, #left will float left. We’re going to make it have a width of 200 pixels. Why? It’s a good width. Why not? Then we have the simple padding of 8px, and a yellowish background color. #Right will be exactly the same, except it will float to the right.

Center is a bit different. For the center div, you must define the margins for both the left and the right, or else it will either be forced to another line, or force another div to another line. But after that, the padding is still 8px and we have another light gold-ish yellow background color. You can also notice that you don’t need to define a width. It already will adjust to the width of the browser and leave room for the sidebars with the margins.

The Footer

If you’ve previewed your layout, it will be very, very messed up. And this can all be fixed with one simple div which must have clear:both. Which leads us to another trend: a footer. Most websites now have a footer at the bottom which gives some kind of info and maybe some contact info, or some links, etc. Your footer will serve two purposes: the most important is to fix the layout, and the second is to give that info.

Using float:left or float:right in layouts always gives some problems unless it is cleared. What the clear:both means is that the floats and the layout will be forced to the bottom, which fixes most problems with this. The footer CSS is as follows:


#footer { clear:both;
background-color:#CCC08F;
padding:8px; }

That’s it. It’s the same as the header basically, except it has a clear:both statement to fix the layout. And you can probably figure out the HTML:


<div id="footer">
<a href="http://www.shadow-fox.net">Back to the article</a>
</div>

It’s that easy.

The only thing that could make this better, is to make the links fit in a bit more with the color scheme.


a { color:#807859;
text-decoration:none; }
a:hover { text-decoration:underline; }

Makes it a nice goldish color. Kind of like the Epiphone Les Paul. Not the best guitar, but that’s the kind of color I was going for.

And that covers exactly how to make a great 3 column fluid width layout with relative ease.

The finished page is:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>3 Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin:0; padding:0; }
BODY { background-color:#651;
font-size:16px; }
a { color:#807859;
text-decoration:none; }
a:hover { text-decoration:underline; }
#header { background-color:#BFAC60;
padding:8px; }
#left { float:left;
width:200px;
padding:8px;
background-color:#dc8; }
#right { float:right;
width:200px;
padding:8px;
background-color:#dda }
#center { margin-right:215px;
margin-left:215px;
padding:8px;
background-color:#eec; }
#footer { clear:both;
background-color:#CCC08F;
padding:8px; }
</style>
</head>
<body>
<div id="header"><h1>3 Columns - 3 Divs</h1></div>
<div id="left">Float Left</div>
<div id="right">Float Right</div>
<div id="center">Center Content</div>

<div id="footer"><a href="http://www.shadow-fox.net">Back to the article</a></div>
</body>
</html>

Coda

Now here’s an update (June 28th, 2006):

If you have the layout as it is right now, and add content to one or the other column, then that one will stretch, and the others won’t. That can definately be a problem. Luckily, I came across this website about creating the ‘one true layout’. While I like my approach better, Alex Robinson gave me the answer to this conundrum.

It takes one extra div and two more CSS rules.

Add a <div> with an id=”wrapper” attribute. Add the opening tag just after the header <div>, and the </div> just before the footer. Then in the CSS, add this:


#left, #right, #center { padding-bottom: 32767px;
margin-bottom: -32767px; }
#wrapper { overflow:hidden; }

The idea is to add so much padding it’ll stretch to the bottom, but at the same time take it up that same amount. I don’t claim to totally understand it, but it works. Also, you need to hide the overflow with the wrapper. This should fix everything.

Drawbacks

I know you’re all thinking, “Wow! This is definitely the answer to everything!” Well, uh… it’s not. There’s one drawback I can think of (I found an answer to the other one):

The center column has to come last in the markup. If you are a die-hard SEO person, that’s very taboo, mostly because content should come first. Luckily that can be fixed with some ingenuity in the two column layout version. But for now, it’ll elude the three column layout.

La Fin

So there you have it! A well structured three column layout! I hope this will serve you well in any kind of web design you do in the future.