Navigation div issue

Question

I'm working on a web site and im having trouble with the left navigation. As you can see here http://animactions.ca/test/Desktop/ the left navigation menu does not go to the bottom, it stops after the content. I would need it to stop at the bottom of the page.

Here is the css:

  /* CSS layout */
body {

    margin: 0;
    padding: 0;
}

#masthead {
}

#top_nav {

    width: 700px;
    background-color: #DDDDDD;
    margin-right: auto;
    margin-left: auto;

}

#container {

    width: 700px;
    margin-right: auto;
    margin-left: auto;
}

#left_col {
    width: 95px;
    float: left;
    background-color: #B79F63;
    border-right: 5px solid #976F43;
}

#page_content {

    width: 600px;
    float: right;
    background-color: #D2C388;

}

#footer {

    clear: both;
    width: 700px;
    text-align: center;
    background-color: #E0E0E0;
    margin-right: auto;
    margin-left: auto;

}

Thanks

Answer 1

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

http://www.cssnewbie.com/equal-height-columns-with-jquery/

Answer 2

One way around this is to create a background image for the div containing the navigation and the main content (in your code it's "container") that mimicks the background colors and separation lines you want for the columns. It can often be as small as 1px high but should be the width of the container, and will repeat down the page.