Quick answer, you're fucked.
What you're seeing is a result of the
PHP Code:
max-width: 36em;
rule you have for the content div. If you want all browsers to act the same,
I think you'd use something like this instead
PHP Code:
div {max-width: 675px; width:expression(document.body.clientWidth > 675? "675px": "auto" );
The problem is, that doesn't fix your problems, it only creates more. Now your content area floats are going to break when they page expands to far. The obvious solution to me would be to clear your floats, but as you've got necessary floats in the left and right columns, if you add any 'clear' to your content area, your entire page will break.
Honest opinion from a guy who's spent way to much time building complicated css only pages, use a simple table for the three columns, than you can float things within the table cells and you won't have any problems.