Making a floated <div> reach the bottom of the page

I'm designing a kind of template which has the following:
background with a repeated image;
central 'wrapper' 80% wide with white background;
top 'banner';
menu bar underneath the banner;
three-column page underneath the menu using floated divs.

The three columns have a different colour background.

See http://mercury.tvu.ac.uk/~alan/themes/theme2.html
The style sheet is at http://mercury.tvu.ac.uk/~alan/themes/theme2.css

The problem is that the background on the columns doesn't reach the bottom of the page if the content is short. I've managed to get the wrapper to fill the page by using 'min-height' but this doesn't seem to work on the columns.

Any suggestions?

Thanks

Alan

Make use of faux cilumns (http://www.alistapart.com/articles/fauxcolumns/)

Will faux columns work with a variable width wrapper?

Will faux columns work with a variable width wrapper?
fluid layout? Then you'd need to use some javascript fix to make them equal, see http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/