CODEWITHSUNDEEP
htmlcsscss-float
Tobias
Tobias

Reputation: 2561

Floating elements left works only partially

I have a HTML page which contains a simple image gallery, pimped by lightboxes (fancybox). The images are supposed to float left, which should result in three images in the first line, and the remaining two in the second.

<div class="image-gallery clearfix">
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 1 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 2 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 3 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 4 is adjusted right below Image 3. Hu?!">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 5 appears centered in another line on its own">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
</div>

Until yesterday, it worked fine, but since today it looks broken (and I have no idea which change could have caused this): The first line works alright, but the 2nd line contains one element, adjusted right, and the last image has another line of its own.broken float

I tried to reproduce the problem in a little mockup, but unfortunately I can't reproduce it there; thus I assume there is some outer element which causes the error. I can't post a link to the original page, because it is not public ...

Any idea, anyone? Thank you!

Edit: I corrected the image; the thumbnail images differ slightly in height, but I still couldn't reproduce the problem in my mockup.

Upvotes: 0

Views: 64

Answers (2)

Luca Detomi
Luca Detomi

Reputation: 5716

Are you sure that images have all equal height? If, for example, the second one in your scratch is taller than others, is normal that fourth lies on the right of it :-)

Upvotes: 1

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

I think you need to clear your float for example with a <br style="clear:both;" />
try this:

<div class="image-gallery clearfix">
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 1 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 2 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 3 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <br style="clear:both;" />
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 4 is adjusted right below Image 3. Hu?!">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 5 appears centered in another line on its own">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
   <br style="clear:both;" />
</div>

Upvotes: 0

Related Questions