Just another IE vs. Firefox vs. Mozilla thread

Yep, I have a problem with CSS and the browsers. I write all my pages for the IE, but recently I saw how strange they look in Firefox and Mozilla.
I searched through Google, browsed tons of forums, but it didn't help me.

The problem:
I want to avoid tables and use DIV-boxes instead. It works fine in IE. But in Firefox and Mozilla the blocks/boxes have a different size. I could figure out that the padding is the problem. Is there a way to keep the padding and fix the differences or do I have to find a solution without padding? How would a solution without padding look like? Oh, I forgot to mention that there's content in the boxes and that may make it look weird...

Example (height is the same, but different output in browsers):
div#left {background:#000077; position: absolute; width: 200px; height: 500px; top:30px; left:0px; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px}
div#main {background:#F0F0FF; position: absolute; width: 520px; height: 500px; top:30px; left:200px; padding-left:10px; padding-right:10px; padding-top:15px; padding-bottom:5px; z-index:0}
div#right {background:#000077; position: absolute; width: 80px; height: 500px; top:30px; left:720px; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px}

 

ie has a bug with padding with fixed widths (padding-inside for IE versus padding-outside with mozilla/Firefox) It's Firefox/Mozilla that render it properly. You can do a search for css ie6 padding issues and they could explain it a lot better than I could.

 

I'm not surpriced