acomodar div con float

[catpaw]

holaa forer@s

necesito su sabio consejo

tengo unos div que quiero que queden asi:

http://s3.subirimagenes.com:81/image..._7541315a1.png


pueden irse agregando mas cajitas y estas deberan acomodarse asi, por ejemplo, la numero 5 pegada al margan izquierdo, la 6 pegada a la caja 5 y asi sucesivamente, pero en cambio que es lo que ocurre:

http://s2.subirimagenes.com/imagen/p..._7541318a2.png


el css que tengo es:

Código HTML:

.columnas{
	width:375px; 
	float:left;
	margin-right:2px;
}

no se que deba agregar o quitar o cambiar para que se logrean acomodar asi como quiero, de antemano gracias

[catpaw]

ya se que pasa, el css esta bien planteado si las cajas fueran del mismo alto, pero como en realidad no tienen un alto determinado y de hecho no lo tendrán (cada una tendra un heigth diferente y variable)



entonces la pregunta cambia un poco

como lograr que se acomoden de la forma sin importar el alto de cada caja??



gracias

[C2am]

Hola, una solución sería crear dos cajas que serán las "columnas" dentro de las cuales irán las cajas numeradas.
En la caja columna izquierda ubicas los impares, y en la caja columna derecha los pares.

Saludos

[kseso?]

Quizás pueda utilizar las multicolumnas de css
http://www.w3.org/TR/css3-multicol/
Con sus particularidades.

Pero si su realización es lo suficientemente compleja, una pizca de js le vendrá bien y asegurará la funcionalidad con más navegadores y sus versiones antiguas.

Porque es demasiado pronto recomendarle el flexbox si es una trabajo "de producción".

[C2am]

Muy interesante tu articulo flexbox kseso?
Saludos

[cristian_cena]

una vez lo necesité y usé jquery.masonery, no investigué como funciona internamente ni sabría como hacerlo desde "solo css"

[catpaw]

Gracias a todos por sus respuestas, no las he analizado bien aun, solo les eche un vistazo rápido, la verdad no pensé que fuera tan complicado, incluso tenia entendido que el display inline podría lograr esto, ya lo probe pero no funciona,

con display inline cada caja "se estira" y ocupa todo el ancho del div padre y con inline-block y block las pone una tras otra

no quisiera complicarme tanto con jqwery y me preocupa también la compatibilidad con otros navegadores, no se que opción me conviene más

analizaré bien sus propuestas y les comento, gracias