More Complex Vertical Stretch

[mactelesis]

I have searched for "vertical stretch, align, etc." and have tried (and failed) with all of the solutions to stretch the "#nav vertical" div so that it streches to the height of the page. As you can see I simply set it to "height:800 px;" - which looks bad on really short pages (http://www.coloradopedia.com/~newpor...Operation.html ) or really long ones (http://www.coloradopedia.com/~newpor...Directors.html

Please help - on deadline - and been looking at the code so long "I can't see the forest for the"...well you get the idea.

Here is the link to the html page:
http://www.coloradopedia.com/~newports/index.html

And here is the CSS stylesheet:

body,td,th {
    font-family: Tahoma, Verdana, Arial;
    font-size: 12px;
    line-height:150%;
    color: #333333;
}
body {
    background-color: #FFFFFF;
    background-image: url('LogoBack.jpg');
    height:100%;
}
a:link {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #ffffff;
}
a:hover {
    text-decoration: underline;
    color: #ff3333;
}
a:active {
    text-decoration: none;
    color: #006699;
}
h1 {
    font-family: Arial, Verdana, Tahona;
    font-size:18px;
    letter-spacing: 3px;
    text-align:center;
    font-weight:bold;
    color: #006699;
}
#main_container {
    float:left
    margin:auto;
    width:800px;
    border-top:0px solid #CCCCCC;
}
#header {
    height:160px;
}
#header_left {
    float:left;
    width:160px;
    height:160px;
}
#header_right {
    float:right;
    width:640px;
    height:160px;
    background:#EAEAEA;
}
#nav_horizontal {
    text-align:right;
    letter-spacing:1px;
    padding:5px 5px 5px 0px;
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;
  background:#990000;
}
#nav_horizontal a:link, #nav_horizontal a:visited, #nav_horizontal a:active {
    font-size:12px;
    font-weight:bold;
}
#nav_vertical {
    float:left;
    width:180px;
    background:#990000;
    height:800px;
}
#nav_vertical a:link, #nav_vertical a:visited, #nav_vertical a:active {
    display:block;
    font-size:12px;
    font-weight:bold;
    padding:0px 0px 0px 0px;
}
#content {
    float:right;
    width:600px;
    padding:3px;
}
#content_box1 {
    border-right:1px solid #333333;
    border-bottom:1px solid #333333;
    padding:5px;
    float:left;
    width:280px;
    height:239px;
}
#content_box2 {
    border-bottom:1px solid #333333;
    padding:5px;
    float:left;
    width:280px;
    height:239px;
}
#content_box3 {
    border-right:1px solid #333333;
    padding:5px;
    float:left;
    width:280px;
    height:240px;
}
#content_box4 {
    padding:5px;
    float:left;
    width:280px;
    height:240px;
}
#footer {
    clear:both;
    font-size:12px;
    text-align:center;
    padding:10px;
    border-top:3px double #999999;
}

[gutierrezalex]

View the source from http://alexandergutierrez.info