Web 101: The Three-Column CSS Layout

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:

• Mistakes are tricky to catch.  Forget a closing <td> or <tr> and you can get very strange results. Additionally, when your entire page relies on a table to hold it together, unrelated parts of the page can have a major impact on each other.  For me, the most frustrating of these was the tendency for a sliced-image heading to fall apart because something further down the page was a couple of pixels too wide.
• The code is ungainly and tedious to work with. Tables-based layouts can get very, very messy.  In the old days, it was very easy to end up with 6 or 7 levels of tables nested within each other. (In other words, a cell of the outside table would contain a smaller table, which had another smaller table within one of its cells, and so on.)  This made it very tedious to find the part of the page you needed to edit, make your edit, and then ensure that your change did not affect the numerous other tables that came into contact with that part of the page. Furthermore, if you didn’t have a CMS or includes, layout changes had to be made on every single page.  With CSS layouts, the CSS file controls the positioning on all the pages, making it fast and easy to reposition something.
• File sizes are bigger.  The same page layout can result in a file 3 to 7 times, or more, if it is done with tables instead of CSS.  Additionally, once the CSS file is loaded and cached, the formatting for the layout does not need to be loaded again.  An extra 15 or 20 kilobytes doesn’t sound like much in today’s broadband, multimedia-heavy environment, but if you run a high-traffic site, it can chip away at your bandwidth resources; if you have mobile users, every kilobyte counts when you’re sending it over the often-sluggish mobile networks.
• It’s not very accessible. Alternative devices, like screen readers, expect a table to hold tabular data, not align your navigation next to your text.  They use this assumption to decide how to read a page.  If your content is all in tables, the sequencing can become garbled and difficult to follow for someone using such a device.

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.

• Sitepoint.com developer forums. These forums were my lifeline when I first started using CSS.  They are a very friendly group, and many very knowledgeable people hang out in the forums to give advice to people just starting out with web technologies.
• A List Apart.  This site provides step-by-step tutorials for common CSS problems, along with accessibility guidelines, short JavaScript hacks, and more.
• CSS Zen Garden.  If you want to get more creative, check out the examples here.  This site has hundreds of examples of what graphic artists have been able to do with their vision and CSS. Every single sample uses the exact same HTML, the only difference is the CSS and artistry.
• Me.  Feel free to drop me an email if you run into a CSS bug that you can’t figure out!
 

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

Comments

[Dennis Bjørn Petersen]

Amy, this is great! It was me who suggested this topic and this post was exactly what I was looking for. Someday I want to make my own theme, so this is a great place to start. Now I only need to learn the rest ;)

Thank you very much.

[Katie Baird]

Thank you, Amy. It is time that I made a little more progress on implementing my own CSS. Your instructions are very clear and easy to follow. I really appreciate this info!

[Amy Cham]

Thanks so much for the comments! I am so glad that you found the info helpful, AND that you are motivated to switch to CSS! :)

It feels a bit like riding around without your seatbelt on at first, but once you get the hang of CSS layouts, you'll like it!

[JTreiber]

This is an awesome resource Amy. Thanks!

[Palm Coast]

Great resource Amy, I also love your design too.

[shazad]

Some excellent points youve listed here maybe you would like to submit this as a tutorial onto our site. Well done Amy

[Amy Cham]

Thanks! Shazad--let me go check out your site...

[Paul]

That would do.
There are some still that uses tables especially when you embedd the table inside the php code for data retrieval. Correct me if im wrong this is what i know so far.

a useful another web resource here:
http://www.ajaxflakes.com/web-design/now-you-can-code-css-like-a-pro-with-these-101-awesome-css-resources/

[Amy Cham]

Oh, I definitely think tables have their use...as tables! I would definitely not dissuade anyone from using a table to display tabular data--that's what they are for!

Great list of resources on that link!