¿Cómo se puede desalinar un div verticalmente?

Hola buenas a todos:

Llevo varios días intentando conseguir esto, pero no hay manera, a ver si me pueden ayudar:

Estoy trabajando con un CMS (spip par ser exactos) y quiero distribuir noticias en 2 columnas.

Para ello creo un div con estos estilos:

.secciones_izq{
float:left;
width:400px;
border-right:#CCC thin dotted;
margin:0 10px 0 0;
padding:10px;
background-color:#FF6;

}
Y otro con estos otros:

.secciones_dcha{

background-color:#0FF;
float:right;
width:310px;
border:#CCC thin dotted; }

El HTML me va creando divs uno tras otro de manera que esta es la imagen final:


Me gustaría poder elimiar los espacios que me quedan entre los divs.

Gracias por su ayuda

Creo que el problema está en el código html, porque si tienes un elemento para cada columna, no debería dejar esos espacios.

El problema como dices casi seguro está en el HTML por la siguiente razón:

Al trabajar con SPIP quiero crear una página en la que los artículos comienzan en la izquierda arriba, y al entrar otro, éste se desplaza a la derecha arriba, luego baja a la izquierda, derecha, etc.

Por lo tanto no puedo definir 2 columnas (o al menos yo no sé como hacer eso en SPIP).

Lo que hago es un bucle que me crea un div a la izquierda (1er artículo) y otro a la derecha (2º artículo). Es aquí cuando se me alinean de esa manera tan horrenda dejando esos espacios.

Mi pregunta va enfocada a si se puede resolver eso con CSS, porque el HTML es muy complejo

No sé si me he explicado, pero es que resulta muy difícil explicarlo aquí.

Gracias por responder.

Ja! creo que si salió

http://jsfiddle.net/vgLjk/

Sí, y muchas gracias por tomarte la molestia, pero es que el HTML no es exactamente así.

1º Los contenidos de los divs son mayores y diferentes de unos a otros por lo que no podemos darle un height fijo, sino auto, y ahí está la madre del cordero.

Me he permitido modificar tu aportación para que lo veas como me sale amí:

http://jsfiddle.net/vgLjk/1/

Gracias de nuevo por tu aportación

La idea es... verificar la altura de la caja para saber si le asignas fl o fr. En caso de que tenga espacio vacio.
En tu ciclo imagino puedes hacer algo como 'this.height'


En tu ejemplo según los altos, 1, 3 y 5 son fl, los demás fr

El ejemplo que puse, era para que entendieras ese concepto. "Si tiene hueco flotalo a ese lado"

Entiendo lo que quieres decir, pero estoy algo pegado en javascript.

A raiz de tu post he estado mirando en internet y he visto como consultar el alto de un div con javascript, pero no sé que hay que hacer para traducir a código ese "si hay hueco" que tú me comentas.

Gracias de nuevo porque me estás ayudando bastante.

He estado leyendo sobre css display: box y todas sus propiedades, pero no me queda claro si se puede aplicar en m caso.

Usando jQuery...

Para saber su posición tienes
$('div').offset().top;

Su altura
$('div').height();

Con esas 2 propiedades puedes saber si hay un "hueco" en la otra "columna" y así asignar la clase correspondiente

$('div').addClass('fl');

Nasho gracias por tus aportaciones, pero aún estoy hecho un lío:
Estoy leyendo mucha documentación sobre Jquery, pero no tengo ni idea de como usar los métodos offset() y height() que me propones.

Lo que no comprendo es cuando dices la expresión "si hay hueco" como se interpreta eso con el código, porque estoy "pegao, pegao". Si me puedes poner un ejemplo simple te lo agradeceré eternamente.

Muchas gracias

http://www.inwebson.com/demo/blocksit-js/