En IE la capa de la derecha se desplaza hacia abajo

gogupe · #1 (**permalink**) 04/11/2009, 16:49

Maldito Internet Explorer, cada vez que intento hacer algo que me sale bien en chrome y mozilla, se me chafa todo cuando lo miro en IE.

El problema es que cuando redimensiono la pantalla, la capa derecha se baja al fondo, y no se como hacerlo, he estado buscando por el foro, por google y por san (...) pero no logro hacerlo...

En fin, el codigo es este:

Código:

<style>
	#contenedor
		{border:1px solid;
		width:99%;
		}
	#izquierda
		{float:left;
		border:1px solid;
		width:300px;
		margin:5px;
		}
	#derecha
		{border:1px solid;
		width:500px;
		margin:5px;
                margin-left:310px;
		}
</style>

<div id='contenedor'>
	<div id='izquierda'>
		En la izquierda
	</div>

	<div id='derecha'>
		En la derecha
	</div>
</div>

¿como puedo hacer para que la capa derecha no se baje ??

En la capa derecha he puesto margin-left:310px, porque no está flotando, y en los demas navegadores se sobreponen.

Muchas gracias

josesanchez · #2 (**permalink**) 04/11/2009, 17:15

Internet Explorer 6 duplica los márgenes en el primer elmeento flotado (si la memoria no me falla, solo es en el primero). Eso se soluciona con un display: inline; en el primer elemento flotado.

Podría ser eso.

deirdre · #3 (**permalink**) 04/11/2009, 17:19

Hola gogupe

Eso siempre te va a suceder si mezclas valores en porcentajes con valores en píxeles. En tu distribución el contenedor tiene medidas en % y los contenidos interiores en píxeles.

Te dejos dos propuestas para que las estudies y adaptes.

Primera: valores en porcentajes

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>Propuesta con valores en porcentajes</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
#contenedor {
	width: 100%;
	border: 1px solid;
	overflow: hidden;
}
#izquierda {
	position: absolute;
	border: 1px solid;
	width: 37%;
	margin: 5px;
}
#derecha {
	position: absolute;
	left: 37.5%;
	border: 1px solid;
	width: 61%;
	margin: 5px;
}
</style>

</head>

<body>

<div id='contenedor'>
	<div id='izquierda'>
		En la izquierda
	</div>

	<div id='derecha'>
		En la derecha
	</div>
</div>
</body>

</html>

Sigue en el post siguiente...

deirdre · #4 (**permalink**) 04/11/2009, 17:20

Segunda: valores en píxeles

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>Propuesta con valores en pixeles</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
#contenedor {
	width: 960px;
	margin: 0 auto;
	border: 1px solid;
	overflow: hidden;
}
#izquierda {
	float: left;
	border: 1px solid;
	width: 300px;
	margin: 5px;
}
#derecha {
	border: 1px solid;
	width: 500px;
	margin: 5px 5px 5px 310px;
}
</style>
</head>

<body>

<div id='contenedor'>
	<div id='izquierda'>
		En la izquierda
	</div>

	<div id='derecha'>
		En la derecha
	</div>
</div>
</body>

</html>

Bye

gogupe · #5 (**permalink**) 04/11/2009, 19:47

Muchisisimas gracias deirdre...

Mira que la solución era fácil, no mezclar tanto por ciento con pixeles, y es que ahora que lo pienso en frío, tiene su lógica... de nuevo gracias.

Una cosa que he observado, es que si pongo el body con el 100% al width, me aparece una barra de scrool horizontal, para evitar esto tengo que ponerlo al 99%

Saludos.

deirdre · #6 (**permalink**) 04/11/2009, 20:24

Hola gogupe

Me alegra que te haya servido la solución. Efectivamente el contenedor al 100% saca el scroll horizontal. Lo puedes bajar al 99%, como dices, o incluso al 99.8% para evitar ese molesto scroll.

Saludos, bye