A floated element carrying a margin on the same side as the float has that margin doubled in IE6. Twenty pixels of margin-left on a left-floated column renders as forty, the column no longer fits beside its neighbour, and it drops below — which presents as a width problem and sends you off measuring the wrong numbers.
.sidebar {
float: left;
width: 220px;
margin-left: 20px; /* IE6 renders this as 40px */
display: inline; /* and this is what stops it */
}CSS 2.1 says a floated element computes to display: block whatever you declared, so display: inline here is ignored by every browser that implements the specification and quietly disables the doubling in the one that does not. That means it belongs in the main stylesheet: no conditional comment, no separate file to keep in step with the real one. The alternative usually reached for first is halving the margin behind a hack, which is a number maintained in two places and wrong the moment the design moves.