full height vertical column

[LittleRed]

how can i create a column to hold my navigation in that matches the height of the main content?

the problem I've got is that the main content block is in a float:right DIV in a light colour and I wanted my navigation in a darker colour. I've set the navigation column in another DIV with
width:150px;
height: 100%;

but this only stretches to the height of whatever is visible when the page loads. If there's a lot of text in the main content area and the user scrolls down, then the navigation column colour just stops.

I'm testing this in IE, maybe it's an IE thing?

thanks for any help

[Charles]

Alas, there's no way around this problem except a little cheat I've been known to employ. Create a 150px wide image of the color you want and set that as the page background repeated along the y axis.

[LittleRed]

brilliant! it didn't occur to me to try that!

thanks again

[Superfly1611]

But surely it will onlt repeat for teh size of the table itself?

At least thats the problem i'm having - or am i doing it wrong?

<table class="menu">
<tr>
<td height=25px>sdfg</td>
</tr>
<tr>
<td height=25px>sdfdgsdf</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
</table>

and then in the style sheet i have the following class....

.menu
{
background-image: url(../../images/menu.gif);
background-repeat: repeat-y;
}



But the navigation menu still cuts off way before the end of the page....

anyone?

[LittleRed]

don't put the content in a table, just do
<div class="menu"> instead

[nkaisare]

Take a look at
http://www.prism.gatech.edu/~gte207x/pyro.html
This may be what you want. Emulates the way tables behave; the left and right columns "stretch" the entire height.

Eric Meyer's tutorial on why the floats work the way they do is worth a read
http://www.complexspiral.com/publications/containing-floats/

[LittleRed]

thanks for those - that's exactly what I was after

cheers!