alt131 - 9:14 am on Jun 3, 2011 (gmt 0)

Hi joshffr [webmasterworld.com], and welcome to WebmasterWorld :)

The navigation bar and the content bar don't extend to the bottom of the footer Div and I have no idea why.

Without an explicit height they will expand to contain the content. If the content is too "short" to fill the space down to the footer, they won't expand that far.

... wrap both of them in a Div layer with height:500px; and set both the navigation Div and content Div to height:100%;. However this caused the text to overflow below the footer and outside of the layout, min-height didn't work either.

An element with height:100% will be 100% the height of its parent. So if the parent was height:500px the child elements will take that for both height and min-height. Both nav and content are floated, which means they are removed from the normal flow - and that means they expand regardless of the other elements. What you saw is expected behaviour - although not what was wanted ;)

Section 9.5 [w3.org] of the css recommendations deals with floats, and if you scroll down to just before the start of section 9.5.1 there are two pictires. The first one illustrates what I expect was happening.

Making this work is quite possible, but the "best" technique depends on the browser/versions you are supporting. What you are wanting seems to be a a fixed-width, 2-col, 100% height, full width header and footer. A search on combinations of those terms will bring up plenty of suggestions.