CSS Positioning: Left hand long menu appears behind footer - html

Question

I have a CSS two column layout which is fixed and centered. On pages where the navigation is long and the content is short, the footer is not repositioning to below the navigation - it remains at the min-height of the content area and the navigation falls behind the footer.
I have included everything in the fiddle for you to see: http://jsfiddle.net/fmJqw/1/
But essentially, i have the following structure:
<div id="wrapper">
<div id="headerWrapper"></div>
<div id="bcrumbwrapper"></div>
<div id="midWrapper">
<div id="navWrapper"></div>
<div id="contentWrapper"></div>
</div>
<div class="clear"></div>
<div id="footerWrapper"></div>
</div>
The CSS is as follows:
#wrapper{
padding:0px;
margin:0 auto;
width:1000px;
min-height:768px;
}
/*Header styles*/
#headerWrapper{
padding:0px 0px 0px 0px;
margin:0px;
width:1000px;
height:175px;
position:relative;
}
#bcrumbWrapper{
padding:0px 0px 0px 20px;
margin:0px;
width:980px;
min-height:24px;
position:relative;
}
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
min-height:513px;
position:absolute;
top:0;
bottom:0;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
float:left;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
#footerWrapper{
padding:5px 0px 0px 0px;
margin:0px;
width:1000px;
height:40px;
position:relative;
}

Answer 1

Because I was trying to float both items to the left, but using absolute positioning for one of the divs, things were competing. I removed the float on the content wrapper and removed absolute positioning on the navigation wrapper. I then changed the background colour of the containing div to ensure that it appeared as if the navwrapper ran the length of the page.
So it became:
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
background-colour: #EBE2CA;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
No changes to the HTML and no JavaScript needed!

Answer 2

You could always dynamically change min-height with a bit a javascipt, based on the height of the div that holds the content, which I think is #contentWrapper.
You could check CSS Sticky footer out: http://www.cssstickyfooter.com/ but it would take a bit of fiddling to get it to work due to the nature of your markup.