T-XU.COM      
Home |
  Home>Computer Programming>CSS>
Making a 3 Column Fluid Layout With CSS
By Ben Hirsch        [Hits: 6162]



3 Column CSS Layouts always seem to be the most sought-after byweb designers. To create a layout with three columns, includingtwo fixed width sidebars and a fluid center and not using tablesseems to be, as A ListApart's Matthew Levine put it, The HolyGrail in his article on this.

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

Thefinished layout can be found here.

Basics

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

3 Column Layout

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 tags, add:

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

* { margin:0; padding:0; } means that all elements will have aninitial margin and padding of 0. This ensures that the layoutwill fit the page fully. Without having a margin and padding of0 on the body, there would be a space all the way around thelayout. BODY { background-color:#651; } sets the backgroundcolor.

The Header

The next thing that most websites have now is a header. It seemsto be a staple for websites, to have your saying and websitename 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:.5em; }

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

The HTML is just as easy.



It's a simple
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.

Float Left
Center Content


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:

3 Column Layout * { 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; }
Float Left
Float Right
CenterContent




Continued...

You can extend this to make a two column layout by simplyremoving one of the two divs (either #left or #right). Byleaving #center and just taking out the corresponding margin, itwill instantly make it a 2 column layout. Good job!
  Top Articles
*CSS: The Basics - ID's and Cla
*CSS: The Basics - ID's and Cla
*The Power of CSS
* The 30 minute CSS tutorial.
*CSS Browser Detection - The co
*Simon Says
*Using CSS with Tables
*Cascading Stylesheets: 5 Reaso
*7 Reasons Why Using CSS is a M
*Teach yourself CSS the easy wa
*Starting Cascading Style Sheet
*CSS - Maximum benefits
  Related Articles
*Simon Says
* The 30 minute CSS tutorial.
*The Concept Behind CSS
* CSS or Tables?
*Introduction To Cascading Styl
*CSS: The Basics - ID's and Cla
*CSS: The Basics - ID's and Cla
*CSS - Maximum benefits
*Using CCS to Eliminate Tables
*CSS Print Media Tutorial
*Teach yourself CSS the easy wa
*Starting Cascading Style Sheet


Prev: You're Making Your Wedding List and Checking It Twice-What Have You Forgotten?   Next: Simon Says



Home | Site Map | Bookmark this site | T-XU RSS
Copyright 2007 T-XU.com - All Rights Reserved Worldwide.