element with an id of header. Notice we didnot have to add another rule for the header (h1). We alreadysaid in our first rule that all elements have 0 margin andpadding, which is my pet peeve with headers. And that's a veryeasy 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. Thismakes it so much easier to manage for you than crazy wrappersand 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 inCSS force an element to either the left or the right. Here wemust make the floats go above the actual center. We can't makethe divs in order of left, center, right, or right, center,left. It must be left, right ( or right, left) then center. Thereason is that floats will be forced to its side, and if it's inthe wrong order, it'll either come before or after it's supposedto.

Anyways, #left will float left. We're going to make it have awidth of 200 pixels. Why? It's a good width. Why not? Then wehave the simple padding of .5em, and a yellowish backgroundcolor. #Right will be exactly the same, except it will float tothe right.

Center is a bit different. For the center div, you must definethe margins for both the left and the right, or else it willeither be forced to another line, or force another div toanother line. But after that, the padding is still .5em and wehave another light gold-ish yellow background color. You canalso notice that you don't need to define a width. It alreadywill adjust to the width of the browser and leave room for thesidebars with the margins.

The Footer

If you've previewed your layout, it will be very, very messedup. And this can all be fixed with one simple div which musthave clear:both. Which leads us to another trend: a footer. Mostwebsites now have a footer at the bottom which gives some kindof info and maybe some contact info, or some links, etc. Yourfooter will serve two purposes: the most important is to fix thelayout, and the second is to give that info.

Using float:left or float:right in layouts always gives someproblems unless it is cleared. What the clear:both means is thatthe floats and the layout will be forced to the bottom, whichfixes 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 hasa clear:both statement to fix the layout. And you can probablyfigure out the HTML:



It's that easy.

The only thing that could make this better, is to make the linksfit 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 widthlayout with relative ease.

The finished page is:

* { 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 - 3Divs

Float Left

Float Right

CenterContent

Back to thearticle