Extending height of a div based on surrounding divs

[barryharris]

Hi,

I have a 3 column layout on my site created using divs. I would like to extend the divs to be the same length, currently the left and right divs are at the height I set and are not extending to the height of the middle one.

I have tried various methods but the only reliable one I can find is to set the height of the divs to an arbitrary value (3000px) - but this solution is far from ideal.

Anyone have a nice method of doing this?

The page is at http://www.barryharris.me.uk/rssfeeds.php if you want to see it.

Thanks.

[NogDog]

Do a search on "faux columns". www.alistapart.com has a couple good articles on this.

[bunner bob]

I had this exact same question today, and thanks to the good folks on this board was led here:
http://www.stunicholls.myby.co.uk/layouts/threecol.html
In my case, I don't want all the columns to go to the bottom of the page. This extends all columns to the length of the longest one. Works pretty darn well - though as a newb it took a bit of messing around to work out the bugs.

- Bob

[bokeh]

There are a number of ways you can do that. Here's an easy one. Put the three columns inside one div. Make an image 1 pixel in height with your three column and border colours. Use this image as the backgound of the containing div and repeat it vertically. The background image will display to the bottom of the longest column.