Hi guys,
Ok so I'm a little late to this discussion after my hols.
Although there's a good fix above I'd prefer to sort out the source of the problem, which is this:
div#content {float:right;
Yes the nav needs to be floated left to take it out of the 'flow', but without any float spec the content will automatically snap into the right place with no clearing probs.
Only extra that needs to be added is:
margin:0 0 0 30%(or nav width); to stop it overflowing the nav, and it's also a good idea to add e.g.
min-height:250px;
_height:250px
to the content div in case some content is shorter than the nav which will make the footer behave.
More details here (I have no connection)
2 Column CSS Layout - TheVanBlog