CSS equiv to valign=100%

[Masetek]

This new site Im working on comprises of 3 vertical sections.

Header
Middle
Footer

Within the middle div there are 2 vertical columns, nav and content. nav is the navigation on the left and content is obviously the page content.

My prob is getting these 2 columns to fill down automatically to the size of the middle div. The nav is taller than the content on some pages where there's little content, but on other pages of the site where theres loads of content the nav is shorter. The nav has a different color background than the content, so you can see it looks stupid when this happens. I want whatever column is shorter to auto fill down to the size of the middle div.

You can fix this problem in tables by using valign=100%. I'm sure there's a hack for it in css. I tried height: 100% and height: auto but no go.

Can anyone shed some light on this?

:cool:

[Masetek]

I just found a work-around for this by using a background image for the middle div. I still wouldn't mind knowing if theres a hack for it though.

:D

[deronsizemore]

IMO the background image is the best option here as the other way around it is more difficult. I have my site set up like this only I have a main content section on the left and a smaller nav section on the right. Feel free to take any code from my site...you'd just have to reverse the floats to get it to work right. Otherwise if you don't want to use a background image, here are two sites that are completely awesome for tips and layout techiques.

http://bonrouge.com/br.php?page=home

http://www.pmob.co.uk/

[Masetek]

Cheers :D

Yeah, I ended up using the bg image. The image only has to be 1px in height so you dont notice any difference in page loading times.

:cool: