Div uno sobre otro

[ilen]

Hola amigos del Internet (bot) necesito una consulta a los GURU del Css tengo 1 DIV que mide de ancho 500px y dentro varios DIV de ancho 240px y de alto lo que achique el ancho (es decir el alto lo define el ancho) y con float:left es decir un coloca tras otro, en el DIV de 500px solo va alcanzar 2 DIV 240px por fila se podria decir esta bien mi pregunta es como hago para que el DIV de abajo osea el 3 se coloque justa arriba del primero como esta en estas imagenes

LO QUE ESTA ACTUAL



COMO QUIERO QUE ME QUEDE




alguna idea ??

[comablck]

lo ideal es q hagas 2 div contenedores en lugar de 1, q es el q decis q mide 500 de ancho, asi formando 2 columnas por asi decirlo.. asi podrias manejar el contenido de cada div de forma vertical sin problemas

[ilen]

No veo la necesidad de hacerlo en 2 DIV contenedores, y si asi fuera tampoco quedara igual recuerda que quiero que el 3 DIV se acople justo abajo del 1 sin importar el tamaño

[cristian_cena]

Una vez necesité lo mismo y usé este plugin jquery: http://masonry.desandro.com/

[comablck]

se te alinean asi como en la primera imagen por q van en secuencia.. y el indice lo agarra de la esquina superior izquierda por eso el tercero no se pone abajo del primero por q va siguiendo al segundo, por q la estructura q queres formar no es un orden horizontal sino un vertical, no se si me explico?

[ilen]

Iniciado por comablck

se te alinean asi como en la primera imagen por q van en secuencia.. y el indice lo agarra de la esquina superior izquierda por eso el tercero no se pone abajo del primero por q va siguiendo al segundo, por q la estructura q queres formar no es un orden horizontal sino un vertical, no se si me explico?

Asi es un order vertical ya que horizontalmente solo 2 DIV estaran vertical es el problema por que son 10 post y se extienden hacia abajo

[ilen]

Iniciado por cristian_cena

Una vez necesité lo mismo y usé este plugin jquery: http://masonry.desandro.com/

creo que la solución ha estado usando jQuery como lo dice "Cristian"

[C2am]

La solución de comablck también es viable y te ahorra el peso de una librería como jquery.
Claro que si ya usas jquery no sería algo a tener en cuenta.

La idea de las dos columnas hace que los div impares se pongan uno debajo del otro en la columna izquierda, y los pares lo hagan en la columna derecha, simulando lo que pretendes.

Creo recordar otro post con este tema y otras alternativas pero no recuerdo donde.

Saludos

[cristian_cena]

Es buena idea eso de identificar pares e impares y colocarlos en columnas distintas. Cuando se me presentó el problema solo necesitaba 2 columnas y el fin era presentar un listado de noticias traídas de una base de datos, por tanto si se me hubiese ocurrido lo que a comablck solo con esto me hubiese bastado para solucionarlo.

Pero bueno, más allá de esto, el plugin es muy potente y abarca otros contextos.

Solo por curiosidad probé, con esta herramienta, cuanto cuesta cargar jquery [versiones 1.6 y 1.7 aprox. 100kb (no me fije pero supongo que librerías similares deben estar pesando casi lo mismo)] con una conexion a internet de 1mb de download. El tiempo de carga ronda los 100ms en algunos sitios mas en otros menos, lo que aproximadamente sería 0.1 segundo, desde el cdn de google tarda menos. Obviamente esta es solo una prueba rápida.