Propiedad de flotación de CSS para alinear div

Estoy teniendo serios problemas para hacer que las cosas floten hacia la izquierda correctamente, o más bien para que los elementos floten “verdaderos” a la izquierda.

Este es mi resultado actual:

salida actual (interrumpida)

y esto es lo que espero lograr:

salida ideal

aquí hay un jsfiddle , cualquier ayuda sería muy apreciada. 🙂

html:

1
2
3
4
5

css:

 html, body { margin: 0px; padding: 0px; } a { text-decoration: none; } #content { margin: 20px 0px 0px 20px; width:180px; background-color: green; overflow: auto; padding-left: 10px; } .box1 { margin: 10px 10px 0px 0px; background-color: red; position: relative; float: left; height: 50px; width: 50px; } .box2 { margin: 10px 10px 0px 0px; background-color: blue; position: relative; float: left; height: 110px; width: 50px; } 

Ah, y solo una pequeña nota, preferiría lograr esto sin usar javascript, pero estoy contento de usarlo como último recurso.

Creo que esto no se puede hacer solo con CSS en este momento, tal vez en un futuro cercano, pero hay muchas soluciones de JavaScript para esto y para hacer algunas investigaciones encontré Masonry , que creo que es la más popular. Deberías probarlo.

Los flotadores no son capaces del diseño que estás buscando. Necesitas algo más las columnas.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

Pero debes tener cuidado con el navegador cruzado y tampoco son geniales en el porcentaje de ancho (por experiencia).

Tengo algo similar a lo que quieres

Violín

 .box5 { margin: 10px 10px 0px 0px; background-color: red; position:absolute; float: right; height: 50px; width: 50px; float:left; left:150px; top:80px; } 

He encontrado respuesta a lo que estás buscando … solo mira este violín que he editado …

 .box4 { margin: 10px 10px 0px 0px; background-color: red; position: relative; float:left; height: 50px; width: 50px; margin-top:-50px; margin-left:3px; 

}

http://jsfiddle.net/fWK2A/6/embedded/result/