CSS fix for IE6 Double Margin Bug

CSS fix for IE6 Double Margin Bug

When most web developers have nightmares, they usually consist of some scenario or other involving Internet Explorer. Even with the release of IE7, Microsoft still hasn produced a standards compliant browser, but hey, it a step in the right direction and for that we are truly grateful Mr Gates.
One of the more common bugs found in Internet Explorer is the dreaded which IE6 (and earlier) would apply to a floated element. The problem will only occur when the margin and float are in the same direction. That is, a left margin is applied to a left floated element or a right margin is applied to a right floated element.
Luckily, there is a simple solution to this problem (well it simple when you know how to do it). To ensure that IE6 displays the correct margin value just add - display: inline; to the CSS style of the floated element.