With 3 column format, how to get all 3 to stretch the same.

[CptanPanic]

I am trying to make a page format with the middle column able to stretch when text fills it up. But I also want the other 2 to reach all the way to the footer no matter how long the middle column gets. How can I do this?
Thanks in advance.
Brian

[edited by: heini at 8:43 am (utc) on June 24, 2003]
[edit reason] removed url / see charter - thanks! [/edit]

[Longhaired Genius]

I don't know if this is possible with css, and if it is it will probably be an ugly cludge. With a table it is trivial, so if this is what you want - use a table.

[le_gber]

Hi CptanPanic and Welcome to WebmasterWorld [webmasterworld.com]

I think this effect is done by using tables and % width for the columns.

Try something like creating a 3 columns table with an overall width of 90% width and 100% height (note:some browser doesn't support 100% height). Center it in the middle of the page.

Now for each colomns width it's trial and error try with 60% for the middle column and 20% for each of the side ones and modify it as you need.

Leo

[trismegisto]

Hi CptanPanic!

You should delete that URL, it’s against the TOS.

Why don’t you just set the background color of your <div id="wrap"> the same as your two navs? your navigation divs would not reach the bottom of the page, but at least, it would look like that.

[ShawnR]

Hi CptanPanic & welcome to WebmasterWorld!

I think it can be done in CSS... I'd agree with Longhaired Genius that the solution might be considered an ugly kludge to some...

Here are two alternative ways:

• enclose the left, main and right div in a div which has the same background colour as the left and right divs (assuming the left and right divs are the same colour). The main div is always likely to be the longest.
  
• make each div a set percentage of the content (e.g. 90%). This requires a 'hack' for IE. See [webmasterworld.com...]
  

Shawn

[added: Oops... should have refreshed my browser; seems taht has already been suggested]

[CptanPanic]

Thanks for your replies.

trismegisto et al:
That is a good idea, but the problem is the left and right bars in the final are going to be different colors.

I normally would have done this with tables, but just started reading that tables are dead, so I was going to see about doing it with css layout. But suppose I will just do it with tables.
Thanks,
Brian

[stickledene]

This [glish.com] page might help you!

Sticky

[portwoode]

This should help..

[webmasterworld.com...]

[SuzyUK]

re: ShawnR's suggestion (which is my preferred method too)

enclose the left, main and right div in a div which has the same background colour as the left and right divs (assuming the left and right divs are the same colour). The main div is always likely to be the longest.

you can get the left/right columns to be different colors too with a little bit of help from a graphic...

make a graphic that's the same color as, and wide enough to color, the left column (e.g. 200px wide 1px high), then set it as the background-image to the container div set to repeat-y..then set the background color on the same div to the color you want the right column to be...

Suzy

[drbrain]

Here's another solution, using floats. You can rearrange the columns, but the innermost column (#centercol here) must be the longest one (if I worked at it, maybe I could remove this restriction).

html, body { margin: 0; padding: 0; width: 100%; }
#head { position: absolute; top: 0; width: 100%; height: 70px }
#content { margin-top: 70px; width: 100% }
#rightcol { float: right; width: 100%; background: #fcc; }
#centercol { float: right; width: 50%; background: #9cf; }
#leftcol { float: left; width: 66%; background: #9fc; }

<div id="content" >
<div id="rightcol">
<div id="leftcol">
<div id="centercol">Main Content</div>
Left Column Content
</div>
Right Column Content
</div>
</div>
<div id="head">Header</div>
<div id="foot">Footer</div>

Adapted from a poster whos name I forget.