Should be fairly easy to fix for IE.

IE doesn't recognise parent>child associations so you can hide things from it in the CSS.

Here are a few things to try:

in #content add:
float: right;

Then beneath that, in a new definition, add:
html>body #content {
float: none;
}

This way IE will pick up the float:right but compliant browsers will get the float:none.

That's probably not your cure but it should give you a little extra knowledge to cure the problem. Maybe try re-sizing one of your columns - IE sometimes adds 3px to boxes and if your two columns add up to more than the size of your wrapper then the right column will be forced to appear beneath the left. So you could try different sizes in the main #content definition then use the html>body trick to give the right size to other browsers.

You could also try a negative top margin on the right column to pull it up e.g. margin-top: -400px; then once again clearing this for other browsers with html>body #content { margin-top: 0; }

Also you might like to look at using a UL to format your navigation.

HTH