I’m currently redesigning a the front of a website for my employer and I decided to try a get going with a 3-column display within a block on the page with CSS. For those that aren’t familiar with CSS, doing a 3-column layout can be a real pain in the ass.

I, as all good netizens do, went to Google first to find a nice way to implement this. I figured that I could avoid reinventing the wheel if I could just find nice examples on the web. However all I came up with were display techniques that were for the whole page to be a three column layout. This is not what I wanted and scalling their techinques to a sub-block version wasn’t producing nice results.

I decided to go off on my own to solve this problem and I ended up finding a more elegant way to do this than any of the other examples on the web I could find.

I’m currently redesigning a the front of a website for my employer and I decided to try a get going with a 3-column display within a block on the page with CSS. For those that aren’t familiar with CSS, doing a 3-column layout can be a real pain in the ass.

I, as all good netizens do, went to Google first to find a nice way to implement this. I figured that I could avoid reinventing the wheel if I could just find nice examples on the web. However all I came up with were display techniques that were for the whole page to be a three column layout. This is not what I wanted and scalling their techinques to a sub-block version wasn’t producing nice results.

I decided to go off on my own to solve this problem and I ended up finding a more elegant way to do this than any of the other examples on the web I could find.

The Problem

I just wanted 3 columns, thats all, I just wanted to display a list of information in 3 columns at the bottom of the page and do it using CSS.

If you search for “three column layout” in Google, the first thing on the list is LAYOUT TECHNIQUES: 3 columns, the holy grail. Once again, there style is a three column layout for the whole page, and it seems to work fine, but thats not what I want. Also, their CSS markup is fairly hefty.

Granted, you can take out all of the style, and just leave positioning…

you’re still looking at a good chunck of code there. Most other sites out there that have explainations of how to do this are pretty much slightly different variations on the above’s basic code.

I wasn’t impressed, and still wasn’t getting the simple results that I was looking for. I grabed my pail and plastic shovel and went to the sandbox to play around with it.

The Solution

After a bit of working with it, and a small break for lunch, I had it. It scaled well, meaning none of the columns shrank in size when the window was resized, and it also wasn’t dependant on absolute positioning, meaning that if you maxmized the window, one of your columns wouldn’t be off in the middle of nowhere.

Here is what I came up with:

The HTML is just as simple. A div block with a list in each block (left, center, right) declared in that order on the page. It works, its much shorter and I have yet to see anyone get a 3 column design that clean that works in all modern borswers.

Here the my css in action.

Thoughts

Maybe someone has already done this. Its not exactly complicated, so its possible. I just hadn’t see this anywhere else, so I thought I would share.

One more addon would be to contain the three columns in a containing block. Then use overflow: auto in the containing block’s CSS definition. That way, if the right or center columns (the ones that are floated) get longer than the right column the containing block with stretch to fit all the information in itself and it won’t affect the display of the page.

Enjoy.