ordenar div flotantes en diferente medidas

Como hago para que no se desordenen los div y vaya quedando uno de bajo de el otro sin importar el height de la imagen.



HTML

Código :

<div class="content">
   <div class="capa">
       <img src="1.jpg" height="200">
   </div>
   <div class="capa">
       <img src="2.jpg" height="120">
   </div>
   <div class="capa">
      <img src="3.jpg" height="300">
   </div>
   <div class="capa">
      <img src="4.jpg" height="180">
   </div>
   <div class="capa">
      <img src="1.jpg" height="100">
   </div>
   <div class="capa">
      <img src="2.jpg" height="200">
   </div>
   <div class="capa ">
      <img src="3.jpg" height="240">
   </div>
   <div class="capa">
      <img src="4.jpg">
   </div>
</div>

CSS

Código :

.content {
   width: 950px;
   overflow: auto;
   margin: auto;
}
.capa {
   float: left;
   width: 200px;
   height: auto;
   background: #ddd;
   padding: 10px;
   margin: 8px;
}
.capa img {
   width: 100%;
}

gracias.!

tabla

Usando algo como blockis

*blocksit**

SinSemilla escribió:

Hace como 1000 años antes de cristo se dejaron de usar las tablas jajaja

nasho escribió:

Perfecto plugin es el que acabo de implementar gracias nasho =D

js_toni escribió:

Supongo que te refieres a las tablas de Moisés, porque las HTML nunca se dejaron de usar.

Y lo que tú quieres hacer no es ni más ni menos que una tabla, por tanto la solución más obvia es hacer una tabla porque lo que quieres es mostrar imágenes en forma tabular.