How to equal length of sidebars with content

Welcome in the quest for the holly grail :)
Once upon a time, everyone was using tables for there layout, and everything was ugly but easy. Now, we use CSS and things are less ugly, but the easy things of the past are now sometimes very complicated!
The equal columns is one of this stupid things that css never really made easy to achieve, not really because the tools are not here, but mainly because Internet Explorer does not behave properly with most of the existing solutions... While there is no perfect way, there is many workaround that you could look into.

The Faux Column Technique

The most used technique is called the "faux columns" techniques (from the french "faux" that means "fake" in english). The idea is to emulate the sidebars and content background by using a repeating image on a div that wraps around all the sidebars and content. So the sidebars look like they're expanding to the bottom, but really it is just a background image. I used this technique in the theme Painted Wall, that you can preview here: http://www.themes.couzinhub.com/ (choose 'painted in the theme switcher). The image that repeats behind the layout is this one. No background image is applied on the sidebar or content, but it still look like the sidebar and content expand until the footer. This technique is fairly easy to achieve if you are ok with photoshop to build your background image, and works easily on all browsers.

more infos on the excellent article on ALA: http://www.alistapart.com/articles/fauxcolumns/

The One True Layout

Another interesting technique is the one you mention, applied on the holly grail from ALA. It is using some negative padding and margins at the bottom of your columns to stretch them to a very large value, and then 'crop' the layout using overflow:hidden; . It looks like a very interesting technique, BUT, an anoying and unfixable bug has been discovered with this. When you use anchors, or id in the URL, (like node/123#link), the layout is shifted up until the anchor... It is a promising solution, but only if you're sure not to use anchors... I wouldn't recomend it

more here : http://www.positioniseverything.net/articles/onetruelayout/equalheight

The companions

A fairly recent technique is the companion method. It is harder to implement, but seams to be very effective. The idea is to create for each column a 'companion' that will simulate the column height. It is described here : http://www.satzansatz.de/cssd/companions.html
The only real downside of this method is the extra markup that it requires.

My own way

It is quite funny that you asked for this support request today, as I've been trying to develop a new method for futur browsers, and I got quite successful i you forget about IE6 :)
I will describe this method in a Blog post on my blog as soon as I feel confident it is stable enough to be exposed.

http://www.couzinhub.com/en/home

Good luck !

Fixing IE is a whole new discussion, and I would be totally incapable of helping you without having the code, but the best way to start debuging IE is to check the bible (ok.. I'll stop the religious references now!) :

http://www.positioniseverything.net/explorer.html - all the known bugs of IE, explained and fixed.

About the last method, I describe it in my Blog here :

http://www.couzinhub.com/en/mar-09/equal-height-columns-css

ou aussi en français :

http://www.couzinhub.com/mar-09/colonnes-de-m-me-hauteur-avec-css