3 Col Header + Footer help....

[jaygosub@mac.com]

Hi all - this is my first post as I'm a complete new comer to CSS, I'm learning fast (out of neccessity) and wondered if anyone could help me with the following;

If you go to http://www.gosub.co.uk/test/home.html you'll see a site that I'm currently working on - it all seems to work and sit together nicely except I want the left hand nav column to extend down to meet the footer - depending on the content of the centre column. As you can see I have a background image which is positioned on the bottom of the nav container - that works well if the height is set for each column - what I need is a layout that will expand with the content, which this does apart from the left hand column. The overall layout itself sits centrally within the browser window, looks ok in Safari on my Mac and in IE7 on my pc.

Any help would be appreciated.

Thanks

Jay

[markbrown4]

Hi Jay, and welcome to Sitepoint

You can fake full length columns by using a repeating background, the technique is called faux columns: http://www.alistapart.com/articles/fauxcolumns/

And you can combine all your background properties into one rule using the shorthand notation:

#wrapper {
	width:980px;
	margin:0 auto;
	background:#FFF url(sidebar_bg.gif) repeat-y 0 0;
}

So if you create an image named sidebar_bg.gif which can be 190px x 10px it will tile down the left side of your layout and make it appear as if the left column reaches the footer.

Hope it helps

[jaygosub@mac.com]

Hi - thanks for the tip - it worked perfectly - now I just need to find a way of getting the graphic to sit on top of the footer ;-)

Thanks again.