ie6 margin expanding by 20px

Question

hi there,

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 :)