CSS - Margins a bad thing?

Question

I've noticed that some browsers have trouble with margins, especially when an element is floated. For example, this website I'm doing looks fine in Firefox, but IE7 screws up the margins completely it seems. I also testet it on several Linux browsers as well and some of the make similar mistakes.

The site is http://w3box.com/mat

This looks fine in FF3.0 as far as I can tell. Haven't seen it in FF2 yet, or IE6. Why does this happen? Is it because I've got floated DIVs with specified margins?

Are there some things I should avoid or should have done differently?

Edit: So it looks like my tags was the source of the screwup. I'd placed images in the that was not defined in the CSS and that had floats on them, combined with margins. These screwed up everything and I have to redo these.

Also, some stuff happened when I used XHTML Strict instead :) Thanx everyone! I'll try to fix this on my own :)

Answer 1

I disagree with using a library if you want to learn about CSS part of the curve unfortunately is learning about the ways different browsers react to CSS. I wouldn't even suggest using a reset stylesheet. If you are going to be doing this a lot learn how CSS works. If you use a library or a set stylesheet which you don't understand how will you fix it when it breaks.