[SOLUCIONADO] Ajustes de elementos verticalmente

[roeboy2]

Hola amigos, soy nuevo en este foro y me gustaria que me ayuden, mi problema es que tengo 2 tipos de div de width iguales pero height diferentes y poniendo varios div uno al lado del otro no encajan uno debajo del otro... un poco confuso verdad pero queria igual a la pagina de "ehouenespanol" es decir cajas chicas que entren entre los grandes si baja terminando la fila... intente con vertical-align: top pero no funciono...

Mi idea es que queden asi los div..




y no de esta forma..



Espero puedan ayudarme... desde ya muchas gracias a todos y Saludos...

[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

[roeboy2]

Muchas gracias por la ayuda... solo que mi pretensión es como la primera imagen y no como la segunda... pero esa respuesta esta excelente para hacer como la segunda imagen... Gracias...

[C2am]

Perdón entendí al "verres".
Entonces lo mismo pero con columnas.
Es mejor que muestres el codigo que estas usando.
Saludos

[roeboy2]

Código HTML:

<article id="article_a">
            <p>ejemplo1</p>
        </article>
        <article id="article_b">
            <p>ejemplo2</p>
        </article>
        <article id="article_a">
            <p>ejemplo3</p>
        </article>      
        <article id="article_b">
            <p>ejemplo4</p>
        </article>
        <article id="article_a">
            <p>ejemplo5</p>
        </article>          
 
/*----------------------------------------------*/
 
#article_a {
    width: 30%;
    height: 300px;
    background-color:#D4D4D4;
    display: inline-block;
    float: left;
    margin-left: 5px;
    vertical-align: top;
}
    
#article_b {
    width: 30%;
    height: 50px;
    background-color: red;
    display:  block;
    float: left;
    margin-left: 5px;
    vertical-align: top;
}
 

y mi pretension es como esta imagen...

[C2am]

El problema es que al flotar los articles no se acomodarán nunca como uno quiere:
http://jsfiddle.net/c2am/5o3q7wke/21/
Prueba a variar el contenido de cada article y verás de que hablo

Supongo que traes los artículos de la base de datos, con lo cual podrás controlar cuanto quieres mostrar en esta sección de tu web.
Lo mejor, para mí, o mejor dicho lo más fácil es darle una altura fija e igual para todos los artículos, y acomodar la cantidad de información a este efecto, o simplemente con un overflow:hidden ocultar lo que sobrepase dicha altura. Todo esto para evitar entrar en una guerra que ganará el float.

Ahora, si no te convence y quieres sí o sí lo anterior, pues mediante programación vas repartiendo los articulos en tres "div columnas".


EDITO: AQUÍ ESTÁ LA SOLUCIÓN: http://ksesocss.blogspot.com/2012/05...uales-con.html
Sabía que había un forma con css

[roeboy2]

Entiendo perfectamente lo que me estas proponiendo y justamente te paso una pagina que estoy haciendo y tiene dicho problema y lo hice con altura fija ya que no encajaba como yo quiero los elementos... [URL="http://www.upe.edu.py"]http://www.upe.edu.py[/URL]

[C2am]

No sé si leiste la Edición pero aquí te dejo la prueba de acuerdo a lo que propone kseso:
http://jsfiddle.net/c2am/5o3q7wke/35/

Lo que sí, debes mirar el soporte que tiene esta propiedad:
http://caniuse.com/#feat=multicolumn

[roeboy2]

Grande maestros!!! funciona de 10, y ahora a ver como puedo hacer para diseño responsivo... ese creo que es oootro tema... mil Gracias amigos... Saludos.

[siddartha23]

Si tienes algún otro problema para implementar ese tipo de estructuras también puedes probar el masonry.js...

[pzin]

Usar columnas CSS difiere de lo que hace masonry, en tanto que en el primero el orden es de arriba abajo y luego lateral y en el último es a priori horizontal y luego vertical. Aunque esto último no es del todo cierto, pero por ahí va la cosa.

[siddartha23]

Yep, tienes razón pzin el ordenamiento de bloques que hace masonry se hace muy notorio cuando lo aplicas en bloques que sigen un orden, post o entradas de blog por ejemplo...