ie6 margin expanding by 20px - html

Question

i have div's wrapped under div's my html code is.
<div id="content-row">
<div id="left-box">
<div id="small-box">
</div>
<div id="small-box">
</div>
<div id="small-box">
</div>
<div id="small-box">
</div>
</div>
</div>
and my css is
/*content-row*/
#content-row {
margin: 0 auto!important;
padding-left:50px;
width:990px;
height:320px;
padding-bottom:20px;
}
#left-box {
float:left;
width:360px;
height:340px;
}
#small-box {
width:160px;
height:150px;
background-color:#fff;
float:left;
margin:0px 20px 20px 0px;
}
the above style sheet is exclusively for ie6. my problem is the left-box is taking an extra 20px at the right side. when i have defined the left-box to be 360px; it it taking as 380px;
here is the link to the full code.
http://jsfiddle.net/HXGsT/
what is wrong with the code?

Answer 1

It's a known bg in IE6, see this page for more information:
http://www.positioniseverything.net/explorer/doubled-margin.html
Basically, the quick fix is to also add display: inline; to the floating element.

Answer 2

In response to your comment:
<div class="content-row">
<div id="left-box">
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
</div>
</div>
.content-row {
margin: 0 auto!important;
padding-left:50px;
width:990px;
height:320px;
padding-bottom:20px;
}
#left-box {
float:left;
width:360px;
height:340px;
}
.small-box {
width:160px;
height:150px;
background-color:#fff;
float:left;
margin:0px 20px 20px 0px;
}
The id #left-box can be an ID as there is only one of these elements with id="left-box" in the document, but because the others are repeated, they must be defined with classes :)