CSS: «float: left» не работает должным образом

Question

Я хочу отобразить 2 столбца изображений, используя «float: left», и я не знаю, почему 3-е изображение справа.

Смотрите скриншот: http://dl.dropbox.com/u/72686/imagesFloat.png

См. HTML:

       <div class="field-item odd">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%202.png" title=""><br>
<span>description1</span>        </div>
              <div class="field-item even">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%203.png" title=""><br>
<span>description2</span>        </div>
              <div class="field-item odd">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%204.png" title=""><br>
<span>description3</span>        </div>
              <div class="field-item even">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%205.png" title=""><br>
<span></span>        </div>

см. CSS:

.field-field-image .odd {
padding-right:20px;
}
.field-field-image .even {
padding-left:20px;
}

.field-field-image .field-item {
float:left;
}

спасибо

Answer 1

Справа, потому что рядом с первым делом есть место.

Используйте clear: left для каждого элемента, для которого вы хотите начать новую строку.

Answer 2

Добавьте margin-bottom:2px к третьему изображению, посмотрите, куда оно уходит. Если нет margin-bottom, margin-top, тогда.