I'm making a simple gallery of thumbnail images that works across varable screen sizes (mostly for mobile and tablets). I use a couple of @media queries to adjust the images large for larger screen sizes. The thumbnails have this pattern:
<img src="../../../thumbs/filename.png" alt="Name"/><br /><label class="title">Name</label></a>
The problem occurs when the label under the thumbnail wraps to two lines. If all the thumb captions are on one line, then they float all the way left evenly. If a label wraps to two lines, then the next line buts against that div because it sticks out, leaving the left-most space blank and unsightly.
I thought I would need to use the display: property on the tile div, but after trying 9 different display properties, such as display:table-cell, the problem persists.
How do I get the height the same for all divs so they'll wrap evenly? I don't want to change the caption lengths. I don't want to set the height because it needs to work whether the label is 1, 2, or 3 lines across several screen sizes.