IE6 marge en expansion de 20px

Question

J'ai div divisée sous div mon code html est.

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

et mon css

/*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; 
} 

la feuille de style ci-dessus est exclusivement pour IE6. mon problème est que la boîte de gauche prend 20px supplémentaires sur le côté droit. quand j'ai défini la boîte de gauche à 360px; il le prend comme 380px;

Voici le lien vers le code complet.

http://jsfiddle.net/HXGsT/

ce qui est mal avec le code?

Answer 1

Il est un bg connu dans IE6, voir cette page pour plus d'informations: http://www.positioniseverything.net/explorer/doubled-margin.html

Fondamentalement, la solution rapide est d'ajouter également display: inline; à l'élément flottant.

Answer 2

En réponse à votre commentaire:

<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; 
} 

L'id #left-box peut être un ID car il n'y a qu'un seul de ces éléments avec id="left-box" dans le document, mais parce que les autres sont répétées, ils doivent être définis avec classes :)