Thumbnail description in gallery partially covered - float:left problem?

See http://jsfiddle.net/ZdjrT/ - The text under the first two thumbnails is partially obscured.

I can solve this if I 开发者_StackOverflow中文版set a height on the description, but obviously the description height is based on how much content is in there, so it's not a static value that I can set.

Is there another solution?

Thanks, Wesley

The reason the text is covered up is because it's so long that it overruns the 120px of height you explicitly set for a.thumbnail. The solution would be to get rid of that height declaration, but that could result in staggered rows that don't line up.

The solution for that is to use display:inline-block instead of float:left. Because you're only doing this on a elements, which are naturally inline, it should work in IE6+.

Here's the fiddle to prove it (note the vertical-align:top)

Take a peek at this revision: http://jsfiddle.net/ZdjrT/5/ I made a.thumbnail display as an inline-block and removed the float. Changed the height to auto and then displayed the img as a block element. Seems to work in IE7/8, Chrome and FF.