¿Cómo hago flotar los todos los divs directamente a la izquierda?

[matheus_rostenkowski]

Muy buenas! Estoy desarrollando una web fluida y me ha surgido un problemilla.
El tema es que en la página principal aparecen una serie de divs divididos en 3 columnas con las entradas hacia los artículos. Mi objetivo era que independientemente de su altura o contenido, estos se fueran posicionando justo debajo del último... es decir:

1 2 3
4 5 6
7 8 9

sin embargo, por alguna razón que desconozco, el resultado que obtengo es algo así:

123
4
56
78
9


He revisado el código y no termino de ver el problema, agradecería mucho vuestra ayuda.


HTML

Código HTML:

<section>
    <article class="wall_art">
    <h2>Packaging Ecológico</h2>
    <h3>Manuel Torrado</h3>
    <a href="" target="_blank"><img src="img/muro/eco_pack_wall.jpg" alt="" title=""></a>
    <h4>2013 | Lugo</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
    </article>
</section>
 

(Serían sobre 9 entradas como esta)

CSS

Código CSS:

section{
    margin-top:3em;
    height:100%;
    }
    
article{
    margin-left:1.563em;
    margin-bottom:1.563em;
    width:30%;
    display:block;
    float:left;
    height:auto;
    }
    
article:hover{
    outline:1.5em solid #FF0;
    }
    
.wall_art{
    font-family: 'PT Mono', sans-serif;
    margin-right:7,5%;
    margin-left:7,5%;
    }
 
.wall_art h2, h3{
    margin-top:-0.3em;
    margin-bottom:1.563em;
    }
    
.wall_art h2{
    font-size:1em;
    font-weight:bold;
    float:left;
    background-color:#FF0;
    }
    
.wall_art h3{
    font-size:0.8em;
    float:right;
    }
    
.wall_art img{
    float:left;
    max-width:80%;
    margin-left:0px;
    margin-bottom:5%;
    }
    
.wall_art h4{
    clear:both;
    margin-top:1.563em;
    margin-bottom:0.8em;}
    
.wall_art p{
    font-size:0.7em;}
    
.wall_art hr{
    margin-top:1em;
    margin-bottom:1em;
    height:0.400em;}
 

Muchisimas gracias de antemano.

[alzacon]

Con el html que pones no veo div alguno, y luego con la estructura básica del problema bastaría (sin el contendido de cada articulo: h1, h2, ...).

Es un problema básico de matemáticas. Aquí tienes el problema, sacado de tu css.

Código CSS:

article{
width:30%;
}
 
.wall_art{
margin-right:7,5%;
margin-left:7,5%;
}
 

Complicado veo meter 3 article.wall_art en el 100%

[matheus_rostenkowski]

Iniciado por alzacon

Con el html que pones no veo div alguno, y luego con la estructura básica del problema bastaría (sin el contendido de cada articulo: h1, h2, ...).

Es un problema básico de matemáticas. Aquí tienes el problema, sacado de tu css.

Código CSS:

article{
width:30%;
}
 
.wall_art{
margin-right:7,5%;
margin-left:7,5%;
}
 

Complicado veo meter 3 article.wall_art en el 100%

Ante todo mis disculpas por extenderme demasiado con el código; soy nuevo aquí y todavía no controlo mucho el funcionamiento de este foro.
Segundo; cuando hablo de div; me refiero al article o .wall_art en su defecto entendiendo div como elemento contendor.
Y 3. Cierto es que se me ha pasdo el 7.5% de margin laterales y que podría se de esto, pero no. Los he modificado y sigue exactamente igual que antes.

Aquí dejo un enlace al sitio de forma provisional para que puedas ver a lo que me refiero:

http://perceibe.50webs.com/

[JustinKO]

Si le das un alto fijo a todos los div para que estén alineados con la misma altura se te solucionará el problema.
Iba a escribirte la razón pero es un poco complicado de explicar, si buscas cualquier tutorial sobre el comportamiento de las flotaciones lo comprenderás.
Ahora bien, si lo que quieres es hacerlo con divs de altura variable, tendría que pensar la manera de hacerlo, pero seguro que hay alguna "estándar" de hacerlo y si buscas encontraras tutoriales o páginas a las que copiarles el código para hacerlo.

[alzacon]

No tienes porque disculparte, simplemente era un consejo porque muchas veces si se pone código de más hace más dificil ver el problema.

Y como dice JustinKO es un problema con la altura de los articulos y el comportamiento de las flotaciones.

[pzin]

Puedes usar columnas CSS:

Código CSS:

section {
  column-count: 3;
  column-gap: 20px;
}
 

También podías usar Flexbox, aunque de momento yo lo dejaría hasta dentro de unos meses por la compatibilidad.

Y lo demás serían soluciones con JavaScript, por ahí anda masonry por ejemplo.

[Valkyrjur]

o podes simplemente cortar el float despues de la ultima columna de cada fila, en este caso en el div 3, 6, y 9