Problema acomodando divs

[DmD]

Hola!
Estoy teniendo problemas al acomodar divs, lo que tengo es esto:


No pued hacer que los 2 cuadrados que están dentro del borde azul suban y queden alineados arriba :S.

El código que tengo es este:

CODIGO HTML

Código HTML:

<!--<!-- LINEA 1 -->
<div class="estilo1"></div>
<div class="estilo2"></div>
<div class="estilo2"></div>
<div class="estilo2"></div>
<div class="estilo4"></div>

<!-- LINEA 2 -->
<div class="estilo3"></div>
<div class="estilo2"></div>

<!-- LINEA 3 -->
<div class="estilo5"></div> 

CODIGO CSS

Código:

.estilo1
{
	width: 474px;
	height: 582px;
	background: #F15A29;
	float: left;
	margin: 5px;
}

.estilo2
{
	width: 230px;
	height: 286px;
	background: #F15A29;
	float: left;
	margin: 5px;
}

.estilo3
{
	width: 476px;
	height: 286px;
	background: #F15A29;
	float: left;
	margin: 5px;
}

.estilo4
{
	width: 226px;
	height: 590px;
	background: #F15A29;
	float: left;
	margin: 5px;
}

.estilo5
{
	width: 976px;
	height: 286px;
	background: #F15A29;
	float: left;
	margin: 5px;
}

Alguna idea de como hacerlo? x_X. En tablas si me sale, pero necesito hacerlo con divs porque los bloques los voy a cargar con contenido de una base de datos y se van a ir acomodando solos dependiendo el estilo que tenga cada campo de mysql.

Saludos,
Daniela.

[PHPeros]

Al div 5 dale un :

Código CSS:

{
le: -2px;
}
 

[pzin]

¿Un le?

[PHPeros]

Si, es una nueva propiedad de css3 muy avanzada

[DmD]

Uhm, qué hago entonces? jaja

Gracias por contestar tan rápido!

[PHPeros]

Al div 5 posicionalo un poco a la izquierda :

Código CSS:

{
right: -2px;
}
 

[DmD]

Acabo de probar y no me funciona =(

[pzin]

Mejor haz un contenedor para los elementos de la izquierda y otro para los de la derecha.
Porque lo que te está ocurriendo es normal, ya que la altura de .estilo4 está empujando al resto de elementos hacia abajo.

Por otro lado, si quieres hacerlo semántico habría que ver a qué pertenece cada cosa y tal vez replantearse el markup.

top, right, bottom y left sólo funcionan cuando el elemento no está posicionado estáticamente, que es el valor por defecto de position. Aunque en este caso, eso tampoco va a cambiar nada, ya que el problema va por otro camino.

[DmD]

Uf, no se que hacer entonces. Porque el tema es así:

Tengo una base de datos de noticias y en cada una podes elegir el estilo del bloque que queres que tenga entonces la estructura no va a ser siempre esa, sino que va a depender de lo que el usuario elija como estilo. Es decir, quizás las primeras 4 noticias tengan el estilo2 o quizas no..
Por eso lo que intento hacer es que no quede ese agujero, porque me rompe el esquema X_X, sino que todos los divs se vayan acomodando con float: left. Por esto mismo también es que no me sirve hacerlo en tablas..

[pzin]

Entonces tal vez te venga mejor usar multicolumnas CSS o tal vez alguna cosa en JavaScript tipo masonry.

Las multicolumnas sería algo así:

Código HTML:

<section>
    <div class="noticia"></div>
    <div class="noticia"></div>
    <div class="noticia"></div>
    <div class="noticia"></div>
    <div class="noticia"></div>
</section>
 

Código CSS:

section {
  column-count: 3;
  column-gap: 10px;
}
 
div.noticia {
  margin-bottom: 10px;
  column-break-inside : avoid;
}
 

http://jsfiddle.net/uq3kF

Com ves es un poco diferente al planteamiento inicial. También tendrías que ver un poco la compatibildad; http://caniuse.com/multicolumn

[DmD]

Gracias pzin!

Con el tema de las multicolumnas estoy complicada por el explorer, funciona solo para la versión actual y justo este cliente es de lo que usan cosas más viejas..

Voy a ver el tema de masonry que comentaste, a ver si sale algo x_X.

Gracias!