Ajustes de elementos verticalmente

[C2am]

Código HTML:

<div id="contenedor-de-3">
<div>caja izquierda</div>
<div>caja centro</div>
<div>caja derecha</div>
</div>
<div id="contenedor-de-3">
<div>caja izquierda</div>
<div>caja centro</div>
<div>caja derecha</div>
</div>
<div id="contenedor-de-3">
<div>caja izquierda</div>
<div>caja centro</div>
<div>caja derecha</div>
</div>
<div id="contenedor-de-3">
<div>caja izquierda</div>
<div>caja centro</div>
<div>caja derecha</div>
</div>
 

y así hasta el infinito. Esta es una forma de hacerlo.

A considerar, las cajas contenedoras-3 son simple div que ocuparán el 100%
Dentro debería ir la cajas con los articulos que muestras.

Piensa de esta manera.
En la primera imagen que muestras tienes tres columnas, y en la segunda (que según entendí es lo que pretendes conseguir) tienes 2 filas. Digo, piensa en esos términos para maquetar tu web.


Saludos

EDITO. otra forma, es poner un div vacio al 100% despues de cada tres cajas de manera que todas las demás quede como alineadas a él.
No me parece muy buena solución porque no deberíamos poner elementos vacíos, cuando esto se podría resolver de otra forma.
Seguro a alguien más se le ocurrirá algo mejor, como el uso de css3 por ejemplo