Stretching Columns.

css,stretch,div,background

[Cbruiners]

Hi All,

I have a 2 column page layout. The left column contains a menu system and the second column contains product information. The left column has a blue background, and the right coumn has a white background.

The problem I have is that the right column will always stretch (it is filled using data from a database) down further than the left hand column and I need the left hand column's blue background to stretch to the same length as the right hand column. Using hieght: 100% won't do it. I have also tried using hieght:100% in tandem with using a background image and the background-repeat, but still no luck.

Can anyone help?

Cheers

Carl

[doodlebee]

My personal favorite is to use the bg image trick. All you have to do is create an image that's 1 pixel tall by however many pixeks wide your sidebar column is, and put your background color in there. Save it, and in your outer div container, put in:

#outer {
background-color:#FFF;
background-image:url("image.gif");
background-repeat:repeat-y;
}

Set your inner divs (the left and right columns) with background:transparent. Whichever div is the longest will strtch out the #outer div, and pull the background color down even with the longest container.

[Cbruiners]

Excellent! Works a treat!

Thanks

Carl