DIV sobrepasa a otros div

danistrein · #1 (**permalink**) 09/10/2009, 00:41

hola gente estoy aciendo una web pero tengo un problema tengo varios div pero justo los que utiliso en el medio de todos no me andan sobrepasan a los que estan abajo como hago para arreglarlos?

aki les dejo los codes:

index:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="web-arriba"></div>
<div id="web-medio">
<div id="web-logo"></div>
<div id="contenido-arriba"></div>
<div id="contenido-medio">


<div class="izquierda" id="espacio">
11
<br />
<br />
<br />
<br />
</div>

<div class="centro" id="espacio">
22
<br />
<br />
<br />
<br />
</div>

<div class="derecha" id="espacio">
33
<br />
<br />
<br />
<br />
</div>
    

</div>
<div id="contenido-abajo"></div>
</div> 
<div id="web-abajo"></div>
</body>
</html>

este es el css:

Código HTML:

body{
background:	#131111;
color: #cdc9c9;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin:15px;
}

#web-arriba{
height: 13px;
width:984px;
background: url(imagenes/web-arriba.png);
margin-left: auto;
margin-right: auto;
}
#web-logo{
width:984px;
height: 100px;
background: url(imagenes/web-logo.png);
margin-left: auto;
margin-right: auto;
}
#web-medio{
width:984px;
background:url(imagenes/web-medio.png) repeat-y;
margin-left: auto;
margin-right: auto;
}
#web-abajo{
height: 13px;
width:984px;
background: url(imagenes/web-abajo.png);
margin-left: auto;
margin-right: auto;
}
#contenido-arriba{
height: 13px;
width:960px;
background: url(imagenes/contenido-arriba.png);
margin-left: auto;
margin-right: auto;
}
#contenido-medio{
width:960px;
background:url(imagenes/contenido-medio.png) repeat-y;
margin-left: auto;
margin-right: auto;
}
#contenido-abajo{
height: 13px;
width:960px;
background: url(imagenes/contenido-abajo.png);
margin-left: auto;
margin-right: auto;
}



#espacio{
float:left;
}
.izquierda{
background: #336600;
width:180px;
margin-left:12px;
margin-right:12px;
}
.centro{
background:#00FF00;
width:550px;
}
.derecha{
background:#FFFFFF;
width:180px;
margin-left:12px;
margin-right:12px;
}

me podrian decir cual es el error que tengo?

kseso? · #2 (**permalink**) 09/10/2009, 05:09

Primero: tienes tres veces el #espacio. Los identificadores únicos (#) sólo se pueden aplicar una vez por documento.

Segundo: creo que te refieres a #contenido-medio ¿cierto?
Debes "limpiar" el efecto del flotado de sus hijos. Investiga la propiedad "overflow" y se la aplicas o el uso de un div de corte para contrarrestar el flotado

Un saludo

danistrein · #3 (**permalink**) 09/10/2009, 22:27

muchas gracias por tu respuesta kseso?, eh podido solucionar mi problema solo agregando el "overflow" al #contenido-medio, y poniendo por separado los float en #izquierda, #centro, #derecha

kseso? · #4 (**permalink**) 10/10/2009, 05:47

Naaah!
Dale las gracias a Homer

alexk · #5 (**permalink**) 10/10/2009, 20:01

Homer rules!... :)