ie6 маржа увеличивается на 20px

Question

У меня есть div, завернутый в div мой HTML-код.

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

и мой 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;
}

приведенная выше таблица стилей предназначена исключительно для ie6. Моя проблема в том, что левый бокс берет дополнительные 20 пикселей на правой стороне. когда я определил левый прямоугольник как 360px; это берет как 380px;

вот ссылка на полный код.

http://jsfiddle.net/HXGsT/

что не так с кодом?

Answer 1

Это известный bg в IE6, см. Эту страницу для получения дополнительной информации: http://www.positioniseverything.net/explorer/doubled-margin.html

По сути, быстрое решение заключается в добавлении display: inline; к плавающему элементу.

Answer 2

В ответ на ваш комментарий:

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

Идентификатор #left-box может быть идентификатором, поскольку в документе есть только один из этих элементов с id="left-box", но поскольку остальные повторяются, они должны быть определены с помощью классов:)