Have Geek Brain

CSS: "float: left" doesn't work as expected

I want to display 2 columns of images using "float: left" and I don't know why the third 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

+2


a source to share


2 answers


It's on the right because there is space next to the first div.



Use a clear: left

new line for each element you want.

+5


a source


Add margin-bottom:2px

to the third image, see if the image goes anywhere. If not margin-bottom

, margin-top

then.



0


a source






More articles:


All Articles