Make sure your math is correct on column widths. Also, you don't seem to understand the concept of floats. Read this:
Floatutorial: Step by step CSS float tutorial
One thing you need to do is float #center. You don't need to give #content height: 100% - it won't do anything. And width: inherit; is unnecessary because that's the automatic behavior.
Look into margin and padding shorthands... "margin: 0 0 0 0;" and "padding: 0 0 0 0;" = "margin: T R B L;" and "padding: T R B L;"
Use a list for navigation (many examples on the site I linked above).
Don't use <h1> more than once for SEO purposes. Use <h2> and <h3> and <h4>, <h5>, and <h6>.
Make your source order: #left, #center, #right and float them all left.
If you want to center #container, do this:
body { text-align: center; /* For IE */ }
#container { width: blah; margin: 0 auto; }
And always, always, always make it work in a good browser first (Firefox, Opera, Safari) then test and fix for the bad one (IE).
Firefox is rendering properly - it's the code that's broken, not the browser.