Cómo colocar bloques juntos?

[fandi_89]

Buenas, querría colocar bloques primero en filas y, que al cambiar de fila, el siguiente elemento se coloque justo debajo del primero de la fila superior pero lo que me sale es esto:

https://googledrive.com/host/0B9VCcIDtNmbVfnJTRHFMT2hMajBWdlZmNk9tOURMdk04dzlxd UhxSVhmNEpMQTVfZXVDbVE/Captura-de-pantalla-(12).gif

alguien sabe como solucionarlo??

[PHPeros]

Te recomiendo usar Masonry

[fandi_89]

Lo he probado y me funciona mal :(
lo que hace es esto:

he probado de las dos formas que pone en la página que me sugeriste, tanto en una como en otra no realiza el efecto deseado.
Pongo el código html de esa sección y los css asociados por si ayuda

Código HTML:

<div id="news">
        <div class="noticia"><p>Este curso ha sido concebido como una introducción al diseño de
aplicaciones Web en HTML5, tanto de tipo genérico como para Firefox
OS. Sus contenidos tienen como objetivo capacitar para la programación
y el diseño de aplicaciones, utilizando HTML5, CSS y JavaScript.
        <div class="noticia"><p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.
        <div class="noticia"><p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.
    </div>
 

CSS:

Código CSS:

#news {
    width:800px;
    margin: 0 auto;
    }
    
#news div {
    height:100%;
    width:370px;
    padding:5px;
    border-radius:15px;
    background-color:rgba(255,255,255,0.3);
    }
    
#news div p {
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:white;
    text-shadow:#000000 2px 2px;
    }
 

[fede5426]

No termino de entender bien que es lo que queres hacer, pero viendo tu codigo, ninguno de tus divs con clase "noticia" tiene etiqueta de cierre, los <p> tampoco..

Esto pasa al cerrar los divs:

http://codepen.io/anon/pen/MwYLaL

No se si es lo que buscas, pero asi queda.

[fandi_89]

Bien visto, me comí las etiquetas de cierre y tenía divs anidados, aún así no soluciona mi problema, lo que quiero es que en la parrilla de divs que se genere, se coloquen unos al lado de otros y debajo sin márgenes. Si entras en el enlace del primer compañero que contestó al tema verás una muestra de lo que busco

[gran Wakka]

pon "float: left" a los divs. Se irán poniendo al lado hasta que no entren e irán para abajo.

[fandi_89]

Iniciado por gran Wakka

pon "float: left" a los divs. Se irán poniendo al lado hasta que no entren e irán para abajo.

fue lo primero que hice y queda así:

[pzin]

Como ya te han dicho, usa Masonry. Léete bien la documentación y te saldrá como quieres.

[luisJava]

Puedes utilizar tambien Bootstrap... tambien muy facil y manejable.
http://www.getbootstrap.com/

[pzin]

Iniciado por luisJava

Puedes utilizar tambien Bootstrap... tambien muy facil y manejable.
http://www.getbootstrap.com/

¿Y cómo lo haces con Bootstrap?

[luisJava]

Iniciado por pzin

¿Y cómo lo haces con Bootstrap?

Bootstrap tambien nos permite organizar todo mediante columnas aparte de poder utilizarlo para la parte responsive...
Ya se que Masonry se trata de una cuadricula para que podamos acomodar elementos de la mejor manera posible pero estoy seguro de que con Bootstrap puede realizar el trabajo por el que está preguntando.
Y quizas Si, sea mas preciso lo que Masonry nos ofrece... Pero solo daba otra opción... jeje
Si me equivoco decirmelo :D

[pzin]

Iniciado por luisJava

Si me equivoco decirmelo :D

Es que Bootstrap no trae nada para eso.