¿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.