views:

152

answers:

2

hi,

I want to display 2 columns of images using "float:left", and I dunno why the 3rd image is on the right.

See screenshot:http://dl.dropbox.com/u/72686/imagesFloat.png

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

see CSS:

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

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

thanks

+4  A: 

It is on the right because there is room beside the first div.

Use clear: left on each element you want to start a new row.

David Dorward
Alternatively, you can give each `.field-item` a fixed height.
akamike
Although that tends to break if the font size changes (even if the font changes (because the user doesn't have the first choice installed) to one of slightly different dimensions.
David Dorward
A: 

Add margin-bottom:2px to the third image,see if the image goes anywhere. If not margin-bottom, margin-top then.

Jorge