Hugo Estrada's House of Wonder

The solution:

A container includes a left and right div with floats to the right and to the left. To clear the floats, add overflow:auto; to the container.

.container 
{
    width: 100%;
    position: relative;
    overflow: auto;
}
 
.nav-left 
{
    float: left;
    width: 18%;
    padding-left: 5px;
}
 
.content 
{
    float: right;
    width: 80%;
    position: relative;
    padding-right: 5px;
}

I first found a solution that used percentage widths instead of fixed widths
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Then I found a solution for clearing the floats
http://www.quirksmode.org/css/clearing.html

Rant:

There is a reason why so many people use tables for layout: CSS column layout is a failure. It is ridiculously complex. I have learned the CSS to get two columns over and over. Since I am not a designer, I keep forgetting these kinds of css tricks, so every so often I have to learn them again (the reason why I am writing this entry.)

Now, using tables for layout is easy. Semantically it is wrong, but for practical use it is so easy that it is hard to believe that there would be more than one or two tutorials teaching you how to do that. In fact, for many, just telling them "create a layout using a table!" would be enough of a tutorial to get a new web designer pushed in the right direction. CSS column layouts, on the other hand, are abundant. Too abundant, in fact, for a problem that already had an easy solution with tables.