I am working on an image gallery that seems to be working so far, but I'm having a floating issue.

The gallery is set up as follows (not the actual classes and IDs, if you compare with the site. I also stripped out all padding and margins because stripping them out of my real code doesn't solve the issue):

html:

<div id="galleryContainer" class="clearfix">
<div class="galleryEntry">
<img src="xxx.jpg" />
<p class="caption">Caption</p>
</div>
... (repeated "galleryEntry" divs)
</div>

css:

#galleryContainer {
width: 700px;}

.galleryEntry {
width:150px;
float:left;}

.caption {
width: 90%;}

Everything works correctly up to a point - the galleryEntry divs float so that there are 4 divs per row.

At the fourth row, I have one div that refuses to float over to the left, which makes it the only div on that "row".

Not browser specific. Any thoughts as to what's keeping it from sliding over?

  • It appears that the caption was causing the problem - still not sure why. I removed it from the live site, but I'm still curious if anyone has an idea. Jeremy Orion over 7 years ago

3 answers

2
points
This was chosen as the best answer

Typically this is because the height of each element in the row is not the same. Either you can edit the text using javascript so that it fits only in one line, or you can use display:table to avert this problem in modern browsers. Though this will still occur in IE 6 & 7.

The way I work around it is, fix the height of the element that contains the image and the text and make it overflow:hidden so that it hides the text that is longer and all the floats work well.

Answered over 7 years ago by Divya Manian
  • Nice. A height of 180px on .galleryEntry seems like it gives you some breathing room for two or three line captions. Alex Taylor over 7 years ago
  • Very nice. That works very nicely. Jeremy Orion over 7 years ago
  • Now if I can just get the end users to be good about entering meaning image titles and captions :) Jeremy Orion over 7 years ago
0
points

It's the two-lined caption (third image, third row) that was doing it. So you can copy-edit the problem away in the short term. I've seen this before due to clashing margins but it didn't yield to my first few experiments.

This will be harder to solve without the code live on the site!

Answered over 7 years ago by Alex Taylor
  • The code is still there to look at if you use the links on the sidebar. :) I can throw it back up again if you need to see it. Jeremy Orion over 7 years ago
  • I added the captions back. :) Jeremy Orion over 7 years ago
0
points

I couldnt add a link in the comment, so I am writing in here.

I use it on sites where users do not care or know why they should enter short titles, so usually clients are happy to hide the long titles, when they are not, I trim using jquery

Answered over 7 years ago by Divya Manian