Three-Column CSS Layout Tutorial submitted by amy cham

I came across this paticular tutorial myself written by Amy Cham on her blog at typepad and just loved the amount of detail and effor she had put in to it. Im sure you can tell by how long it is and even before reading it that this tutorial will definatly teach you quite a few things about CSS and three column layouts in CSS. As i commented on her blog and i will say it again well done even i learnt a thing or two.

 

 

Your Ad Here

The original tutorial is posted at :

http://amycham.typepad.com

 

Wendy Piersall of eMomsAtHome.com has launched her second “How To” Group Research Project, where she invites her readers to contribute “How To” articles across a wide range of blogging, web development, entrepreneurship and internet marketing topics and awards prizes for the top articles.

I was in the midst of wrapping up school during the first one, but this time around I’m jumping in on beginning CSS! I’m sharing the topic with Lucy Nixon of WebLucent.com; she’ll guide you through the "What is CSS?" phase and font formatting techniques, and I’m giving you the rundown on how to build a table-free three-column page layout with CSS! (Lucy’s article focuses on WordPress users. Aside from the mechanics of using the WP interface, the CSS info is the same for everyone regardless of platform.)

In a rush? Download the final CSS and sample HTML.

Why Use CSS?

For several years, web designers relied on tables to create their columns and hold things like images in their proper places.  Today, many still do.  In some ways, tables are very intuitive to use—they stretch when they need to, and they keep items aligned in neat rows, columns, and grids. 

So why use CSS instead?  The tables method has some drawbacks:

So that’s the why and wherefore of CSS vs. tables.  Hopefully, that’s enough motivation for you to learn a new trick or two.  If you’re ready to bring your layouts into the 21st century, read on…

Quick Start – a note for Dreamweaver users

I’m about to go through the step-by-step process for building this layout.  If you’re using Dreamweaver, however, you can give yourself a jumpstart using one of their pre-built stylesheets. You can find the basic three-column layout by going to File > New and clicking Page Designs (CSS) from the Category list in the dialogue window.  Select Three-Column Left Nav from the Page Designs (CSS) list, save the files in the proper directory, and you’re ready to visit Lucy’s article on CSS font formatting!  (Note: My one complaint about their template is it does not use a list to define its main navigation, reducing the flexibility of the HTML for future redesign. Scroll down to "Bonus How To: Navigation" for some links that will help you understand this problem and what you can do about it.)

Getting Started

The first thing you’ll want to do is set up your basic, clean HTML file with a link to the CSS file you’ll be using. For this tutorial, you want five divs with id’s of header, colone, coltwo, colthree, and footer.  To save you some effort, here’s a file you can use.

Open up a new file, and save it as threecol.css in the same directory as the HTML file. Ready? Great!

To set up columns in CSS, you’ll need to do three main things:

  1. Set the appropriate widths on each of the column divs.
  2. Set the float property on each div.
  3. Make sure the header and footer clear properly (meaning, they do not sit next to your columns).

Setting the Widths

For maximum flexibility, we are going to use percentages to set our column widths and set the body, which provides our base width for the whole site, at 85%. By using percentages for the column and body, the site will expand and contract based on how the user has set their browser window and avoid horizontal scrolling. This is referred to as a fluid layout. If you prefer to maintain more precise control over the site width, regardless of the size of the user’s browser window, set the width on the body using pixels.

Here’s the code for setting widths:

body{ width: 85%; }
div#colone{ width: 25%; }
div#coltwo{ width: 40%; }
div#colthree{ width: 25%; }

This code sets what will become the left and right columns to each take 25% of the page, and the middle column to take 40%.  We’ve left out 10% of the page width to give us a little room to play with margins, and the body at 85% so that it leaves some whitespace at the sides.

Learning to Float

So far, your page should look just like it did when we started. Not very satisfying, is it? Let’s fix that.

To make your columns behave like columns, we are going to add the float property to each of the column divs.  For each of colone, coltwo, and colthree, add float: left;

So your column styles should now look like this:

div#colone{
    width: 25%;
    float: left;
}

div#colthree{
    width: 25%;
    float: left;
}

div#coltwo{
    width: 40%;
    float: left;
}

And your page should look like this:

But wait…there’s four columns!!  How did that happen?  This is where “clearing” comes in.

Are we clear?

To keep your footer from sitting next to your rightmost column, we are going to add the clear property.  Add the following code to your CSS file:

div#footer{
    clear: both;
    }

Your page should now look like this:

 

Great! Now our columns are in place, and the footer is at the bottom of the page, where it belongs.

Spacing Out

Now that we have our columns ready, let’s get some control over the whitespace on the page.  First, let’s center the page in the browser.

To center our body on the page, add margin: auto; to the style for your body:

body{
    width: 85%;
    margin: auto;
    }

We are also going to add a little whitespace between our columns to make all that text easier to look at.  To do this, let’s just add a margin property to our middle column. The coltwo style should now look like this:

div#coltwo{
    width: 40%;
    float: left;
    margin: 0 15px;
    }

Our margin property condenses the property for top, right, bottom, and left into a single definition. The first number says that there is no margin at the top or bottom. The second number says that there is a 15 pixel margin at the left and right sides.

Our page now looks like this:

 

It’s a subtle change, but you can see the page contents now centered in the window, and there is a little bit of breathing room between the three columns.

 

Bonus How To: Navigation

Now that we have our columns in place, let’s change our lists of links in the header and footer into some simple horizontal navigation bars. If you look at the HTML, you can see that instead of simply putting the links together on a single line, I organized them into lists. The reason for this is that lists give us more control over how to position the links. If one day you decide you want a vertical list of links that sits to the right of your logo, for example, the same HTML can achieve this with some new CSS.

First, let’s redefine the overall styles for the list, changing some properties on the <ul> element.  Add the following code to your CSS file:

div#header ul, div#footer ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

This code gives us a clean slate for the <ul> elements in the header and footer divs by clearing away the default bullets, margin, and padding that the user’s browser may be applying to lists.  Similarly, we will start with the following code on our <li> elements in these divs to clear away default styles:

div#header ul li, div#footer ul li{
    margin: 0;
    padding: 0;
    }

Your header and footer lists should now have no bullets or extra spacing around them.

So, how do we make them horizontal?  We do this with the display property. Add display: inline; to your <li> styles:

div#header ul li, div#footer ul li{
    margin: 0;
    display: inline;
    padding: 0;
    }

Now, the top of your page looks like this:

Next, let’s space out our links with the following code:

div#header ul li{
    margin: 0 15px;
    }

Neat, eh?  Now, let’s make that top navigation look like a navigation bar.  Add the following code to you CSS:

div#header ul{
    background-color: #CC6600;
    padding: 5px;
    }

This snip indicates that the <ul> should have an orange background, and adds 5 pixels of padding to give your links a little breathing room.

Finally, let’s restyle our links to we can read them:

div#header ul li a{
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    }

Okay…one more thing. Let’s center that footer.  Change your footer style to include text-align: center:

div#footer{
    clear: both;
    text-align: center;
    }

And that’s it! Your page should now look like this:

Beyond the Basics

What we covered just now was a very basic three-column setup with a simple horizontal navigation bar.  The code we used today should work just fine in modern browsers. However, as pages get more elaborate, with backgrounds, images floated within the columns, more creative layouts, and more, things can get a little quirky and very frustrating for a CSS newbie.  In general Firefox, Safari, and Internet Explorer 7 do what they are supposed to, though each has a few quirks.  Internet Explorer 6 is more ornery.  Browser quirks are discussed a lot online, though; run a Google search for your problem, and you will probably find a solution.

If you want to learn further CSS spiciness, or run into a problem you can’t fix, here are some resources that can help you out.

Once you get the hang of it, CSS is a lot of fun.  Play around with it, and enjoy!

The original post on Amy’s blog is posted at

http://amycham.typepad.com/amy_cham_inside_my_head/2007/07/web-101-the-thr.html

 

If you enjoyed this post, make sure you subscribe to my RSS feed

!

August 31, 2007 | Filed Under CSS Tutorials, Submitted tutorials, Web Design tutorials, Fresh tutorials 

Comments

2 Responses to “Three-Column CSS Layout Tutorial submitted by amy cham”

  1. Daniel on September 5th, 2007 3:08 pm

    I couldn’t understand some parts of this article olumn CSS Layout Tutorial submitted by amy cham | MirazTutorials.com, but I guess I just need to check some more resources regarding this, because it sounds interesting.

  2. Bubbila on March 20th, 2008 10:51 pm

    Sweet tutorial, just what I have been looking for.

Leave a Reply




  • Sites We Like

    Blitzster Blogging aid Sony PS3 PlayStation Mad Travel Me To Young Entrepeneur Big Brothers House Mates Adobe Air Flex and Flash Gadgets/Electronics How To Hints MR2 Developments Fast Track Health/Fitness Quick Tip List Weakster Design Tutorials Submit/Request Tutorials Hosting Domains Servers Young Mans Journey


    • UK Life Insurance Quotes
    Life Quotes
    Illness Insurance    		 Contents Insurance
    Web Site
    Your Ad Here
    Secured Loans

    Compare secured loans to find the perfect deal for you!

    www.accepted.co.uk
    Matched.co.uk