Firefox padding problems (IE works fine)

[generalchaos316]

This has been driving me crazy for a while now. I have one big <div id="content"> that holds most of the main content on my site. It is assigned a width of 740px. The padding on it is set at 10px and the left/right margins are set to auto so it will be centered on the page.

The problem is when I change the #content padding to a larger number such as 30px, it becomes bloated in Firefox. All of a sudden, my banner which is 750px wide does not line up with the edges of the content div anymore.

Here is a picture with the 10px padding:
http://www.msu.edu/~greanyam/media/hmm01.JPG

Here is a picture when I change the stylesheet to 30px padding:
http://www.msu.edu/~greanyam/media/hmm02.JPG

Here is a link to that page's code (open as text file):
http://www.msu.edu/~greanyam/media/slideaway.php

Here is a link to the stylesheet:
http://www.msu.edu/~greanyam/media/madcap.css

Internet Explorer displays the page just fine though! I can't figure out what I am doing wrong for the life of me...

[doctordigital84]

Firefox is actually doing it "Right". Padding does not just bump content in, but also adds width. To fix this, just decrease the width the same amount as the total left and right padding

[generalchaos316]

Heh, I had done this already kinda (which is why the width of the #content area is 740 px instead of 750px)

Is there a better approach to laying out the site that is more multi-browser compatible?