[SOLUCIONADO] Problemas de desestructuración con "float: left;"

[Adbane]

Hola a todos, estoy teniendo un problema que me gustaría que me ayudarais a resolver.

Estoy trabajando en un timeline básico y sencillo, similar al que usa Facebook. La idea es tener un contenedor (#timeline) y dentro de éste contenedores ".item" que son flotantes, todos con el estilo "float: left;". Luego aplico Masonry para alinearlos correctamente.

El problema viene a ser un fallo a la hora de estructurarse correctamente los elementos, ocurre que cuando un elemento de la derecha no es mas largo, o mejor dicho, su bottom no alcanza el bottom del que tiene a su izquierda, el siguiente elemento (que por defecto debería colocarse a la izquierda) lo hace a la derecha, concretamente debajo del elemento en cuestión. No tiene que ver con el Masonry, pues quitandolo el problema persiste. También me he asegurado de que el problema es exactamente este, pues metiendole más contenido a ese elemento hasta que logra ser lo suficiente "largo", el siguiente se coloca correctamente. Cabe destacar que todos tienen un "height: auto;", lo cual es importante porque el contenido siempre variará por muy largo que sea.

Aquí una imagen del resultado, los elementos rojos deben ir a la izquierda, los verdes a la derecha:


EDIT: Podeis ver un ejemplo de lo que ocurre en JSFiddle: http://jsfiddle.net/Monobe/Yq7GK/

La estructura del HTML es así:

Código HTML:

<div id="timeline">
     <div class="item>Lorem ipsum</div>
     <div class="item>Lorem ipsum</div>
     <div class="item>Lorem ipsum</div>
 
     <div class="clear"></div>
</div>
 

Llamando a Masonry:

Código Javascript:

$('#timeline').masonry({itemSelector : '.item'});
 

Y el CSS:

Código CSS:

#timeline { width: 100%; } /*Dentro de un contenedor de 1024px*/
.item {
    width: 50%; height: auto;
    float: left;
    margin-bottom: 20px;
}
.item:nth-child(even) { background: red; }
.item:nth-child(odd) { background: green; }
 

¿Alguna idea? Se me ocurren maneras de solucionarlo pero son todo soluciones un poco sucias, me gustaría una manera limpia y eficaz para solucionarlo, más que nada porque esta web no es moco de pavo y será autogestionable para una empresa.

¡Muchisimas gracias de antemano!

[metacortex]

Ten en cuenta que Masonry agrega sus propios atributos vía DOM a los elementos afectados. Quizás con el float:left sin querer estás entorpeciendo su correcta presentación.

[Adbane]

Iniciado por metacortex

Ten en cuenta que Masonry agrega sus propios atributos vía DOM a los elementos afectados. Quizás con el float:left sin querer estás entorpeciendo su correcta presentación.

Masonry no tiene mucho que ver, ya que hice pruebas desactivandolo.

Aún así pude solucionarlo con los estilos:

Código CSS:

.item:nth-child(even) { clear: left; }
.item:nth-child(odd) { clear: right; }