Error con el width y divs

[matucasal]

Gente, estoy ante un problema q no logro solucionar.
Estoy armando el maquetado de una pagina, pero nose porque la parte de abajo no ocupa 1024 px y la de arriba si. Quiero q ambas lo hagan
Dejo una pagina adonde lo subi http://www.playalimpia.com.ar/

dejo css medio desordenado porque lo hice recien

Código:

#header{
	height:200px;
	width:1024px;
	overflow:hidden;

}
	
#titulo{
	float:left;
	position:absolute;
	width:350px;
	height:200px;
	background-color:#009;
	
}
#menu{
	float:right;
	width:674px;
	height:200px;
	background-color:#0FF;
	}
	
#cuerpo{
	margin-top:20px;
	height:1024px;
	
	}
	

#colizq{
	
	height:1200px;
	float:left;
	position:absolute;
	width:674px;
	background-color:#F00;}
	
.fotoarriba{
	background-color:#000;
	height:400px;
	width:674px;}

#contenido{}

.izq1{
	height:800px;
	float:left;
	position:absolute;
	width:337px;
	background-color:#0FF;
	}
.izq2{
	height:800px;
	float:right;
	width:337px;
	background-color:#FF9
	}

#colder{
	
	height:1200px;
	float:right;
	width:350px;
	background-color:#360}

Si encuentran el error me lo tiran?
Gracias

[danneg]

tu css

Código:

#header{
	height:200px;
	width:1024px;
	overflow:hidden;

}
	
#titulo{
	float:left;
	position:absolute;
	width:350px;
	height:200px;
	background-color:#009;
	
}
#menu{
	float:right;
	width:674px;
	height:200px;
	background-color:#0FF;
	}
	
#cuerpo{
	margin-top:20px;
	height:1024px;
	
	}
	

#colizq{
	
	height:1200px;
	float:left;
	position:absolute;
	width:674px;
	background-color:#F00;}
	
.fotoarriba{
	background-color:#000;
	height:400px;
	width:674px;}

#contenido{}

.izq1{
	height:800px;
	float:left;
	position:absolute;
	width:337px;
	background-color:#0FF;
	}
.izq2{
	height:800px;
	float:right;
	width:337px;
	background-color:#FF9
	}

#colder{
	
	height:1200px;
	float:right;
	width:350px;
	background-color:#360}

tu html

Código:

<div id="todo">
	<div id="header">
		<div id="titulo">
		</div>
		<div id="menu">
		</div>
	</div>
	<div id="cuerpo">
		<div id="colizq">
			<div class="fotoarriba">
			</div>
			<div id="contenido">
				<div class="izq1">
				</div>
				<div class="izq2">
				</div>
			</div>
		</div>
		<div id="colder">
		</div>
	</div>
 	<div id="footer">
	</div>
</div>

bueno, note que en el identificador cuerpo olvidaste escribir la propiedad width, ademas se te olvido escrivir los valores para el div footer

aver si esto te ayude, fue lo que note mal en tu codigo

[matucasal]

sisi al footer todavia no le hie nada, ahora voy a ver si agregandole tamaño a cuerpo cambia, pero creo q no va a pasar nada, osea los divs q estan adentro de cuerpo tienen el width necesario (entre los dos suman 674).
Pero me voy a fijar gracias

[cristian_cena]

El ancho real es la suma de : width+margin+padding

[matucasal]

decis q por ahi poniendo margin + padding todos = 0 se pueda arreglar?

[matucasal]

Era lo de cuerpo {width=1024 px;} jaja muchas gracias perdon por no creerte

[cristian_cena]

A modo de ejemplo:

si tenes un div #content con dos div anidados: uno #left y otro #right. Y si quieres por ejemplo aplicar float-left a #left y #right (este se flota en el espacio de linea que le deja #left) para lograr una maqueta a dos columnas. Y #content tiene un width de 1024px.

Entonces: #left y #right sumados los dos deben medir 1024px
#left = margin:10px; padding:10px; width:204px; entonces su ancho real seria 224px y solo te quedarian 800 px para jugar con #right.

que pasa si #right tiene un width de 801px? simplemente, se flota en la primer línea que encuentre hacia abajo.

saludos matucasal