expanding div

[dtm32236]

on this page:
http://www.foremostgroups.com/dev/2007corporate/products/K&B/heritage_bath/delaware/

does anyone know how I can make the div holding the left hand links expand the height of the page (height:100%; )

The containing div CSS is:
#main_content {
width:750px;
min-height:400px;
height:auto !important;
height:400px;
float:left;
border:1px solid #c2d1d7;
border-bottom:none;
border-top:none;
background-color:#ffffff;
}

then the left navigation CSS:
#left_nav {
width:155px;
min-height:400px;
height:auto !important;
height:400px;
float:left;
background-color:#f2f6fa;
border-right:1px solid #c1d2d7;
}

the min-height:400px; height:auto !important; height:400px;
is a min-height hack for IE, and it works for the container (#main_content), but not the #left_nav.

i tried height:100%, and that didn't work...

i figured that applying that to the left navigation, it should make the div expand the height of the page, but it doesn't... it makes left_nav 400px in height, but it doesn't expand with the page.

any ideas how to do this?

sorry for rambling.

[KDLA]

I suggest you apply a repeat-y background of the gray color to the parent div, with the navigation having background: transparent. That way, it will give the impression that the left div is stretching the length of the parent.

[dtm32236]

I like the idea, but it's not working (unless I misunderstood you)...

the left_nav is the parent div of the links (which are in a UL list), and it has border-right:1px solid #c1d2d7;

so if I set the left_nav height:100%; with background-repeat:repeat-y;, it just makes the div the height of the links UL, not the entire content (#main_content, which has background already set to #ffffff)

so, it goes something like:
<div id="main_content"> <!-- background #ffffff; min-height:400px -->
<div id="nav_left"> <!-- background #c1d2d7; repeat-y; height:100%; -->
<ul>
<li>links1</li>
<li>links2, etc</li>
</ul>
</div>
</div>

I hope I didn't just confuse things (I probably did though)

[Kravvitz]

KDLA implied that you would use a background image.

Setting a percentage height is useless (except to give an element hasLayout in IE/Win) if the parent element doesn't have a set height. Height and Min-Height (http://www.dynamicsitesolutions.com/css/height-and-min-height/)

[dtm32236]

oh, okay, the use of min-height != height makes sense, but I don't see how setting a background image is going to make the #left_nav div expand the height of #main_content.

sorry if I'm being an idiot about this - I'm relatively new to CSS layouts.

[Kravvitz]

Equal columns is often an illusion created with backgrounds. Use Faux Columns to make the elements appear to have equal heights.
Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)
Creating Liquid Faux Columns (http://www.communitymx.com/content/article.cfm?cid=AFC58)
Faux Columns for Liquid Layouts (http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layouts/)

Alternatively, you could use a technique like this one (http://www.pmob.co.uk/temp/2column_simple_1.htm).