Thumbnail gallery height problem

Question

I have this gallery of thumbnails of youtube videos with their title under. http://skitch.com/subzane/bqgqw/demo

The problem I have is that when floating them they don't appear as I like, this because the height is variable. I've read a blog post a few weeks ago solving just that problem but I can't find it anywhere.

So I'm asking for the link to that blog post or the contents of it really :)

• The thumbnails height do vary, I cannot set this to a fixed height.
• The number of thumbs per row vary. I cannot set a fixed number.
• no javasscript fixes. only css.

Thank you

Answer 1

instead of floating divs, you can switch your thumbnails to lists (which is actually more semantically correct anyway.. )

For example:

<style type="text/css">

ul {
    list-type: none;
}

li {
    display: inline;
}
li img {
    vertical-align: top;
    margin-left: 5px;
    padding-bottom: 5px;
}

</style>

<div style="width: 280">
    <ul>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    </ul>
</div>

for further reference, visit http://www.alistapart.com/articles/practicalcss/

Answer 2

How much is the height really going to vary? If it's not going to vary much then just set the height to that of the max?

For browsers that support inline-block:

Although here's a inline-block cross browser article

#thumbsWrapper div{display:inline-block;vertical-align:top;margin:20px;border:solid 1px #f00;width:180px;}

<div id="thumbsWrapper">
  <div style="height:180px;">
    <img src="thumbnail1.gif" />
  </div>
  <div style="height:240px;">
    <img src="thumbnail2.gif" />
  </div>
  <div style="height:210px;">
    <img src="thumbnail3.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail4.gif" />
  </div>
  <div style="height:300px;">
    <img src="thumbnail5.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail6.gif" />
  </div>
</div>

Answer 3

OK. After more hours of googling I found what I was looking for.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

It's a use of display: inline-block that solves my problem.