ok go with the box model since I have a lecture in 15 mins:

In IE, you set the width of an object, and margins, padding, etc are subtracted from that width.

In Moz, you set a width, and margins, padding etc are added to that width.

So if you have a width and some padding on an object, it will have a different total width in the two different browsers.

So the workaround (not the hack):
Use nested elements:
<div id="div1"><div id="div2">

</div></div>
Now we apply a width to div1 (our container), and put margin/padding etc on div2 so that both browsers will render exactly the same.

I'll look at your other problem later if I have a chance. http://www.bluerobot.com/web/layouts/ have some good layouts