See http://home.hawaii.rr.com/timfm/CSS-Discuss/layout_re_dev2.htmlSee also http://www.ugcs.caltech.edu/~takoyaki/css-test/boxmodel_monster.html

revision: jun19

Took out the middle div and added a border to the outer one. Forget all those fancy formulas, I tweaked the numbers until the page looks approximately the same in Mozilla and IE. If you don't care as much about that, don't worry about it. If you can understand it, more power to you.

originally:

Getting this right in both Mozilla and Internet Explorer was hella annoying because of their different interpretation of the box model: IE includes the padding in the width of a box, and Mozilla doesn't. Luckily for us, IE doesn't recognize the descendant (sp?) marker >, which allows us to revise the styles for use by Mozilla. (see the in-document style-sheet)

Also, the way to center a div is different in IE than in Mozilla. In IE, you need to surround it by a 'text-align: center' area, while in Mozilla you should set its own margins as 'margin-right: auto; margin-left: auto;'. You can see the IE method in the styling for the #IEcenter DIV, and the Mozilla method in the .center class. I left a one pixel border on the IEcenter DIV to show where it's bounded.