I recently encountered an issue with my HTML page that features a basic image gallery enhanced by lightboxes (fancybox). The images are meant to align left, with the first row containing three images and the second row containing two.
<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>
Everything was working fine until yesterday, but now it seems broken. The first row displays correctly, but the second row has one element aligned to the right and the last image appears on a separate row entirely.
I tried to recreate the issue in a mockup here, but I couldn't replicate the problem. This leads me to believe there may be an external factor causing the error. Unfortunately, I can't share the link to the original page since it is not public...
Any suggestions or insights would be greatly appreciated! Thank you!
Edit: I have updated the image; although the thumbnail images vary slightly in height, I still cannot reproduce the issue in my test setup.