Posición de los article dentro de un section

Hola, estoy haciendo una web en la que dentro de un section pongo varios articles del mismo ancho cada uno de ellos, y no consigo que se coloquen uno encima de otro, por ejemplo si un article es muy corto se queda un hueco libre hasta que se coloca el de abajo, para que me entendáis lo que quiero decir he hecho un esquema con el paint (un poco cutre jeje es solo para que me entendáis).

Así es como está ahora

Y así es como quiero que quede

¿Cómo puedo hacerlo? Gracias.

Hola!

Probablemente sea porque les diste un alto específico, siendo que debes dejar un height: auto; para que quede como quieres.

<style type="text/css">
  /* Un arreglo para los padres de elementos que flotan */
  #seccion:before,
  #seccion:after {
    content: "";
    display: table;
  }

  #seccion:after {
    clear: both;
  }

  #seccion {
    *zoom: 1;
  }

  article { height: auto; float: left; width: 200px; }
</style>

<section id="seccion">
  <article>contenido...</article>
  <article>contenido...</article>
  <article>contenido...</article>
  <article>contenido...</article>
</section>

Eso es lo que se me ocurre.

Con el código que me has puesto se me queda igual que lo tenía, adjunto una captura de pantalla
[contenido no disponible]

Como ves los artículos de la segunda fila se quedan debajo del más largo de arriba, yo lo que quiero es que no queden huecos vacíos entre los de una fila y otra sino que se vayan acoplando al de arriba.

He añadido a tu código un color de fondo y un margen, pero sin el margen también pasa eso.

Podrías poner el código CSS y HTML que tienes hasta ahora :)?

Al final lo que he hecho es crear 3 section dentro del section principal a modo de columnas, y cuando la pantalla sea de móvil he puesto que no floten, de momento lo dejo así, más o menos es lo que quería.
Cuando tenga terminada la web ya la pondré en el foro para que le echéis un vistazo.
Gracias ;)