View Full Version : Making a floated <div> reach the bottom of the page

03-10-2009, 12:13 PM
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?



03-10-2009, 12:16 PM
Make use of faux cilumns (http://www.alistapart.com/articles/fauxcolumns/)

03-10-2009, 12:30 PM
Will faux columns work with a variable width wrapper?

03-10-2009, 01:04 PM
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/

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum