Tamaño de divs dentro de una caja, con float

[Jask]

Muy buenas, qué tal?
Quería comentarles una duda.

Tengo el código:

Código PHP:

  $queryListas = mysql_query("SELECT DISTINCT lista_id_propia FROM wp_lista ORDER BY lista_id_propia DESC LIMIT 0,4"); 
    while($queryListas2 = mysql_fetch_assoc($queryListas) ) { 
        $IDxLista = $queryListas2['lista_id_propia']; 
         
        # Muestar imágen, nombre y URL de las listas (poner en un CSS aparte más adelante) 
        echo "<div class='caja_individual'>"; 
        $queryContenido = mysql_query("SELECT DISTINCT lista_nombreunico, lista_imagen FROM wp_lista WHERE lista_id_propia = '$IDxLista'"); 
        while($queryContenido2 = mysql_fetch_assoc($queryContenido) ){ 
            echo "<div><img src='http://".$queryContenido2['lista_imagen']."' width='130px' height='87px'></div>"; 
            echo "<div><a href='listas/?verlista=".$IDxLista." '>".$queryContenido2['lista_nombreunico']."</a></div>"; 
            break; 
        } 
        echo "</div>"; 
         
    }  
   

Resumiendo. Lo que hace es coger 4 datos de la BD e imprimirlos dentro de un div, cogiendo la imagen y el título de estos. Aquí dejo el css que se aplica:

Código CSS:

.caja_individual{
    width:125px;  
    float:left; 
    margin:5px;
    font-size:22px;
    min-height:200px;
}
 
.caja_individual img{
    border:1px solid #00CCFF;
}
 

Aquí dejo la imagen de como queda :



El problema, como veis, es que cuando un título es más largo que otro baja la caja de abajo pero no la de al lado suya, por lo tanto queda "deforme". Habría alguna forma de hacer que ambas cajas bajen a la vez?

Gracias :)

[kseso?]

Fíjese en este ejemplo:
http://css.devillasbuenas.es/alineacion_multiple.html
en la "galería central".
Los div que contienen la imagen y el texto están identificados como /#segundo .hijo /
Si le quita la altura verá que con contenido dispar no se produce esa disposición.
Cada "fila" se alinea a la misma altura. Ahora al centro del elemento más alto de cada fila.
Pero puede variar ese detalle declarando el /vertical-align/ para modificarlo.

Después de lo anterior, una observación personal: en su ejemplo creo desproporcionado el tamaño del texto respecto a la imagen que acompaña. Ahí puede haber un error de planteamiento inicial. Pero ya le digo, es sólo una observación personal.

Edito y amplío:
Hay otras vías distintas a css para lograrlo, con alguna diferencia.
La última que he visto es una realización de Chris Coyier en css-tricks.com:
Equal height blocks in Rows Basado en jQuery

[sanxuan]

Si vas a mostrar la información siempre de la misma manera, dos elementos arriba y otros dos abajo, puedes encerrar cada dos elementos dentro de otro div.

<div id="contiene4elementos>
<div class="contiene2elementos>
<div id="elemento1"></div>
<div id="elemento2"></div>
</div>
<div class="contiene2elementos>
<div id="elemento3"></div>
<div id="elemento4"></div>
</div>
</div>

Si no se muestra como esperas añade la propiedad clear:both a los div.contiene2elementos.

[kseso?]

@sanxuan:
Aunque posiblemente esa sería otra forma para arreglar "el desaguisado", no creo muy conveniente aumentar de tal manera el etiquetado en el html, a más que requeriría el aumento en la programación php para contar cada par de cajas y generar otra para contenerlas, amén de los id de cada "elementoNº".

-------//-------

Y ahondando en el tema del etiquetado, creo que sería más correcto utilizar una lista para su presentación.