Twitter Bootstrap Mediagrid/Thumbnails & empty space - html

Question

I'm trying to make a movie manager to get me back working with rails again. I'm reading the movies from a database, and trying to present their covers in a responsive grid.
I'm new to using Twitter Bootstrap, and having some weird issues with weird spacing. All my images are the same height and width, so that shouldn't be an issue.
To see the issue, go here: http://jsfiddle.net/32AcT/ (Due to the responsive grid, you may have to make the view window bigger, so they're not all in a single column.) I'm simply doing:
<ul class="thumbnails">
<li>
<a href="#">
<div class="caption">2 Fast 2 Furious</div>
<img alt="2 Fast 2 Furious" class="thumbnail" height="111" src="http://cf2.imgobject.com/t/p/w500/4rDV8TgaILHRfX1IRgpysjkD9A0.jpg" width="74" />
</a>
</li>
...
</ul>
Here is an example of what it looks like (weird spacing highlighted with pink box):
I understand why the widths are off, due to the caption lengths being longer than the image's width (although I'd like to fix that somehow too). Why is this happening, and is there any good method to prevent it?

Answer 1

try this one i think it will solve your prblem
http://jsfiddle.net/32AcT/1/
.thumbnails > li { width:100px; }
.thumbnails .caption{ overflow :hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumbnails img{ height:111px; width:74px}
main issue with bootstrap-combined.min.css line no 23 height:auto;
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

Answer 2

If I get the problem right, the caption is causing it. What would you say to a solution like this: http://jsfiddle.net/32AcT/4/
The difference from your solution is that the Caption is inside the thumbnail (seen in code 1) div and thus is limited in the width (seen in code 2). It could be that you have to play a round with the height of the div but I guess that would be the "best" solution for this.
Code 1:
<li class="span4">
<div class="thumbnail">
<img src="http://cf2.imgobject.com/t/p/w500/1ZjDmPKMUtout8hR77qmK1llgls.jpg">
<div class="caption">
<h3>Along Came a Spider</h3>
<p>Action Action</p>
</div>
</div>
</li>
Code 2:
.thumbnail{
height:650px!important;
}