creating variable height bgimage in nav

[LizzyB]

Hi,

Ive created this page
http://www.whizzliz.co.uk/littlemasters/

behind the navigation is a paint splatter image and I've set it a min height to fill down to the bottom. What I want to do though is have it auto fill against the lenght of the content section as the other pages will be different lengths.

I have a feeling its something simple but I just cant figure it out.

Thanks
Liz

[Centauri]

Cheat. As there is really no way of getting the left column height the same as the main content, don't bother putting the background on the left column.

Remove the background image info and height from #navigation. Change the margin on #maincontent to zero and change the padding to give 160px wide left padding (this padding will be under the menu). Then apply the background to the #maincontent div, repeated-y instead. This applies the background to the left side of teh main content div itself, which happens to be under the navigation column.

Css changes:#maincontent{
background-image: url(navbg.jpg);
background-repeat:repeat-y;
padding:10px 10px 10px 160px;
margin:0;
}

#navigation{
float:left;
width:150px;
}

Cheers
Graeme

[LizzyB]

Hi Graeme - you are my hero! thank you!

Just one question - you have put margin:0 in the #maincontent - is this needed as i set margins etc to 0 with * at the very start of my stylesheet (trick you taught me earlier)
Liz

[Centauri]

I'm not overly sure on that margin. I used the Firefox Webdeveloper Bar to change the css on the fly, and it seemed to require that zero setting. That may be just a quirk of the Webdeveloper Bar environment, or it could be because of the margins on the container - not sure as I haven't tried this standalone. See what happens if you leave that out.

Cheers
Graeme

[LizzyB]

HI - I removed it and it looks the same so posiibly not needed. Ill leave it out and get a few people to test on different browsers. Thanks for you help again. I also need that trick on another site!

Liz