float? y Responsive

[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