[SOLUCIONADO] float? y Responsive

[Fernand0]

Buenas, he retomado HTML+CSS y estoy un poco oxidado.

Me podrian decir como hacer para que los <articles> de este sitio se situen de esta manera? He probado con float, pero consigo esto..

Espero que se entienda bien lo que quiero hacer, cualquier cosa pregunten.

No es mala voluntad de no subir codigo, pero sinceramente vivo cambiandolo, ya estoy colapsado y no tengo ningun attr mas que float: left; en cada <article>

Saludos y gracias por su tiempo.

P.D.: en cuanto a Responsive, estuve leyendo algo, alguien me puede recomendar un buen tutorial?

[AngelKrak]

codigo amigo? o la pagina online para poder ver el error bien y el codigo completo ;)

[pzin]

Lo se que se suele usar es una solución vía JavaScript. Ese sitio que dices usa masonry.

[Fernand0]

Iniciado por AngelKrak

codigo amigo? o la pagina online para poder ver el error bien y el codigo completo ;)

Código HTML:

<section id="articles">
    
    <article>
        <header>
            <img src="/app/content/Cripta2.png"/>
            <h6 class="title red">
                Cripta de la Colonia Güell
            </h6>
        </header>
        <summary>
            <hr/>
            <p>..</p>
            <hr/>
        </summary>
        <footer>
            <h6 class="date">
                15.06.2015
            </h6>
        </footer>
    </article>
    
    <article>
        <header>
            <img src="/app/content/007-post-Barcelona_y_el_Modernismo_2.jpeg"/>
            <h6 class="title red">
                Barcelona y el Modernismo: un verano lleno de propuestas
            </h6>
        </header>
        <summary>
            <hr/>
            <p>..</p>
            <hr/>
        </summary>
        <footer>
            <h6 class="date">
                15.06.2015
            </h6>
        </footer>
    </article>
    
    <article>
        <header>
            <img src="/app/content/App_CHN_gaudi_0.jpg"/>
            <h6 class="title red">
                Las mejores apps sobre Gaudí y Barcelona
            </h6>
        </header>
        <summary>
            <hr/>
            <p>..</p>
            <hr/>
        </summary>
        <footer>
            <h6 class="date">
                15.06.2015
            </h6>
        </footer>
    </article>
    
    <article>
        <header>
            <img src="/app/content/retogaudi_dic_natividad.jpg"/>
            <h6 class="title red">
                #RetoGaudí: Gaudí en la lista del Patrimonio Mundial de la UNESCO
            </h6>
        </header>
        <summary>
            <hr/>
            <p>..</p>
            <hr/>
        </summary>
        <footer>
            <h6 class="date">
                15.06.2015
            </h6>
        </footer>
    </article>
    
    <article>
        <header>
            <img src="/app/content/PalauGuell5.png"/>
            <h6 class="title red">
                Palacio Güell
            </h6>
        </header>
        <summary>
            <hr/>
            <p>..</p>
            <hr/>
        </summary>
        <footer>
            <h6 class="date">
                15.06.2015
            </h6>
        </footer>
    </article>
 
</section>
 

Código CSS:

#articles {
    background-color: rgba(200, 200, 200, 1);
    height: auto;
    margin: 20px;
    max-width: 100%;
    width: 75%;
}
 
#articles > article {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    float: left;
    height: auto;
    margin: 0 15px 15px 0;
    overflow: hidden;
    padding: 0;
    width: 30%;
}
 
/* -------------------------------------------------------------------------- */
 
#articles h6.title {
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
}
 
/* -------------------------------------------------------------------------- */
 
#articles summary p {
    font-size: 12px;
    padding: 10px 16px;
}
 
#articles hr {
    background-color: rgba(0, 0, 0, 0.10);
    height: 1px;
}
 
/* -------------------------------------------------------------------------- */
 
#articles footer {
    height: 26px;
}
 
#articles h6.date {
    float: left;
    font-size: 11px;
    font-weight: normal;
    padding: 6px 8px;
}
 

Ahi esta el codigo.

Iniciado por pzin

Lo se que se suele usar es una solución vía JavaScript. Ese sitio que dices usa masonry.

Muchas gracias pzin! pero hay manera de hacerlo sin JS?

Saludos

[pzin]

Iniciado por Fernand0

[HIGHLIGHT="HTML"]pero hay manera de hacerlo sin JS?

Con CSS3 se puede. Con columnas CSS o FlexBox. Tendrías que mirar qué tal la compatibilidad.

Pero bueno, no hay de malo en usar JavaScript.

[Fernand0]

Funciona perfecto con masonry.. pero quisiera probar con puro CSS

Te agradezco :D

[Fernand0]

Aca dejo un ejemplo bastante bueno que encontre para suplantar a masonry

http://sickdesigner.com/masonry-css-...ome-with-css3/
demo: http://sickdesigner.com/demo/css-mas...s-masonry.html