Column Designs With CSS

CSS makes layouts easier than they were with tables – there's not much debate about that. One of the reasons many people stuck with tables for so long is that it can be difficult to create column-based designs using CSS. Since there are so many websites that essentially consist of a middle column of content surrounded by left and right columns containing navigation and ads, this was a problem.

The Power of Float

CSS columns aren't that difficult to produce once you understand how CSS float rules work. Float allows you to say that some parts of your content should 'float' next to other parts, instead of being displayed one after the next (that is, underneath each other).

The first thing to do is to divide your content from your navigation using the div tag, like this:

<div id="left-nav"></div>
<div id="right-nav"></div>
<div id="main-content"></div>

Note that the divs must be in this order – left, right, centre – otherwise 1 column might end up underneath another. Ordering things logically as left, center, then right, for example, will cause your right column to end up under the center one.

The next step is to write the CSS for those IDs you just set up. It looks like this:

#left-nav { float: left; width: 20%; }
#right-nav { float: right; width: 20%; }

You can adjust the widths and set the widths as percentages or in pixels. And that's it! You've set up a successful 3-column layout.

The Background Problem

If you want your left and right columns to be have a different background colour than the center, you're in for a problem. In most browsers, your columns are only considered to extend downwards as far as the text in them does, which means that the bottoms of your columns won't line up.

The best way around this is to make your columns fixed-width (meaning that you specify their width in pixels, eg. 'width: 100px;'). Once you've done that, you can create a 1-pixel-high image that includes the colors you want for the columns, and make it the background image, tiling it using 'background: repeat;'.

The only problem left to solve at this point is that fixed-width columns can look strange if you leave them spaced as they are. The solution is to specify a fixed width for your document's body, and then set the left and right margins to 'auto' – this will centre the page on the screen.

The Header And Footer Problem

If you want to display a header or footer separately from the page's columns, CSS can give you a little trouble. You can add them to the middle column, but that would require you to add extra space to the navigation columns at the top, and make sure they didn't reach down further than the main content text at the bottom. It quickly becomes painful to work with.

The solution to this lies in the CSS command called 'clear'. Clear means you don't want anything to be floating around the tag you apply it to. It has 3 possible settings: left, right and both.

You then add your header before and footer after the other divs, like this:

<div id="header"></div>
<div id="left-nav"></div>
<div id="right-nav"></div>
<div id="main-content"></div>
<div id="footer"></div>

Then you add this CSS command:

header, footer { clear: both; }

That tells the browser that you don't want anything floating on either the left or the right of your header or footer: you want them clear of everything. You might also like to add text-align: center, so they appear in the middle of the page.

And that's it!