[Ovillo] Como estructurar unos thumbnails con texto variable

[Martin Etxauri]

Aupa

Tengo un tema que no acabo de poder solucionar, he estado mirando por  
la red pero no hay manera.

El tema es una página de thumbnails que debajo llevan un texto, pero  
es un texto variable. Con lo cual lo que me interesa es que al ser uno  
de los textos mas extenso se amplíe el alto de todos los que están en  
la misma fila, sin descojonciar todo, claro.
Y bueno, el verdadero problema viene cuando quiero que esto sea fluido.

Me explico con ejemplos:
el código podría ser:

<div id="tabla">
		
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
	</div>

con este css:

#tabla div{
	float: left;
	width:150px;
	padding:5px;
}

pero en cuanto uno de los textos es mas extenso los flotados se quedan  
clavados en el que sobre sale.
Y no ha pasan a la izquierda, no ha habido manera de conseguir nada. :(

Si esto mismo lo quiero hacer pero en algo que no sea fluido, esto es,  
con un número de columnas concreto, lo puedo hacer sin problema pero  
tengo que meter cada fila en un div  para romper el flotado y que no  
se desencajen, algo así:

<div id="total">
		<div class="fila">
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
		</div>
         <div class="fila">
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
		</div>
         <div class="fila">
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet. Con minimim venami quis nostrud laboris nisi</div>
		</div>
         <div class="fila">
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
			<div><img src="imagen.jpg" alt="altdeimagen" /><br />Lorem ipsum  
dolor sit amet.</div>
		</div>
	</div>

con este CSS:


#total div div{
	width:150px;
	padding:5px;
	float: left;
}
. fila{
clear:left;
}

O utilizando el display: table-cell:

#total div div{
	width:150px;
	padding:5px;
	display: table-cell:
}

y de esta manera los divs que contienen imagen y texto cogen la misma  
altura, y les puedo dar borde a todos y que quede potito potito...  
pero con el IE6 y 7 hemos topado, así que na...


Aun y todo no me convence un pelo el tener que meter cada fila dentro  
de otro div, no pinta nada ese div.

¿como lo veis?

Espero haberme explicado bien, si no es así me re-explico con gusto e  
intentando se mas claro

Gracias a todos.