div se pega a la derecha

WixTeR · #1 (**permalink**) 09/05/2009, 09:28

Hola a todos, llevo mucho tiempo en este foro y siempre me ha solucionado muchos problemas, pero ahora no encuentro la solución por ningun sitio y necesito vuestra ayuda.

Tengo una página que cuando la veo con Firefox o Chrome sale perfecta, todo bien centradito y esas cosas, la estructura son 3 div dentro de div principal ("wrapper")
este wrapper en Firefox & Chrome & IE8 sale centrado pero no en los IE antiguos. (y la persona para la que estoy creando la página es anti-tecnologia y no quiere actualizar su navegador "porque no se aclara")

En fin, el div en cuestion (wrapper) en IE6 o IE7 sale pegado a la derecha y no se porque. (Bueno tengo una ligera pero no se si es por eso ni como solucionarlo) No se si será por la propiedad position:absolute de los div contenidos en el div wrapper

La página es uv.es/calfaro

Copio el CSS por si aca:

Código:

#wrapper{
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
	width: 940px;
	text-align: center;
}

#izquierda{
	float: left;
	border: 1px solid #666;
	width: 230px;
	height: 812px;
	position: absolute;
	_position: absolute;
}

#centro{
	float: left;
	margin-left: 242px;
	position: absolute;
	_position: absolute;
	width: 470px;
}

#centro .up{
	border: 1px solid #666;
	height: 260px;
}

#centro .down{
	margin-top: 12px;
	border: 1px solid #666;
	height: 540px;
}

#derecha{
	margin-left: 722px;
	float: left;
	border: 1px solid #666;
	width: 230px;
	height: 812px;
	position: absolute;
	_position: absolute;
}

#plantilla{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#plantilla .arriba{
	border: 1px solid #666;
	height: 150px;
}
#plantilla .abajo{
	border: 1px solid #666;
	margin-top: 12px;
	padding: 20px 20px 0px;
}

Muchas gracias y un saludo

willyfc · #2 (**permalink**) 09/05/2009, 12:51

no son necesarias las posiciones absolutas y menos los hacks que declaras siendo que son los mismo el original y el hack, pero bueno, pienso que sería de esta manera:

Código html:

Ver original<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#wrapper{
    margin:70px auto 0 auto;
    width: 940px;
}
 
#izquierda{
    float: left;
    border: 1px solid #666;
    width: 230px;
    height: 812px;
}
 
#centro{
    float: left;
    width: 470px;
}
 
#centro .up{
    border: 1px solid #666;
    height: 260px;
}
 
#centro .down{
    margin-top: 12px;
    border: 1px solid #666;
    height: 540px;
}
 
#derecha{
    float: left;
    border: 1px solid #666;
    width: 230px;
    height: 812px;
}
 
#plantilla{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
 
#plantilla .arriba{
    border: 1px solid #666;
    height: 150px;
}
#plantilla .abajo{
    border: 1px solid #666;
    margin-top: 12px;
    padding: 20px 20px 0px;
}
</style>
</head>
 
<body>
<div id="wrapper">
    <div id="izquierda">asdfasdf</div>
    <div id="centro">fasdfasdf</div>
    <div id="derecha">asdasdf</div>
</div>
</body>
</html>

WixTeR · #3 (**permalink**) 09/05/2009, 13:30

Muchisimas gracias!!! La verdad es que los hacks los puse porque estaba desesperado y me puse a probar cosas que veia por internet y se me olvido quitarlos cuando copie el código.

Acabo de entender que es lo que pasaba, xD. Cuando quitaba el position:absolute me dejaba el margen izquierdo respecto del útlimo div y como sobrepasaba las dimensiones del div wrapper pasaba a la fila de abajo y eso era lo que me llevaba de cabeza.

Vuelvo a repetir, muchisimas gracias por todo.

Un saludo!!

willyfc · #4 (**permalink**) 09/05/2009, 13:37

no es nada, cuando quieras.