There are lots of fixes and hacks out there to stop the famous IE three pixel padding bug; what happens is when you have a floated div IE adds extra padding to the div next to it. It’s very annoying when you’re trying to get a layout spot on.
I’ve tried many fixes ranging from setting the float div to display: inline; (which didn’t work) and trying to browser sniff to serving a different style sheet to IE browser (which I resent doing).
I found this trick that worked perfectly however. If you use a child selector you can serve a style that IE will use and another all the others will use. Let say you have divs, left and right, and the right div should have a 500px left margin; your CSS might look like this:
div#right {
margin-left: 497px;
width: 475px;
}
div#container > div#right {
margin-left: 500px;
}
Here the width is set at 3 pixels less then overriden to the correct value via the child selector. It all renders correctly though as IE ignores the child selector.