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.



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:.5em;
background-color:#dc8; } #right { float:right; width:200px;
padding:.5em; background-color:#dda } #center {
margin-right:215px; margin-left:215px; padding:.5em;
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 .5em, 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 .5em 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:.5em; }

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:



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.

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

The finished page is:

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
content="text/html; charset=iso-8859-1" /> type="text/css"> * { margin:0; padding:0; } BODY {
background-color:#651; } a { color:#807859;
text-decoration:none; } a:hover { text-decoration:underline; }
#header { background-color:#BFAC60; padding:.5em; } #left {
float:left; width:200px; padding:.5em; background-color:#dc8; }
#right { float:right; width:200px; padding:.5em;
background-color:#dda } #center { margin-right:215px;
margin-left:215px; padding:.5em; background-color:#eec; }
#footer { clear:both; background-color:#CCC08F; padding:.5em; }

3 Columns - 3
Divs

Float Left

id="right">Float Right

Center
Content

Back to the
article