Foros del Web » Creando para Internet » CSS »

En IE la capa de la derecha se desplaza hacia abajo

Estas en el tema de En IE la capa de la derecha se desplaza hacia abajo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/11/2009, 16:49
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 831
Antigüedad: 11 años, 1 mes
Puntos: 30
En IE la capa de la derecha se desplaza hacia abajo

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
  #2 (permalink)  
Antiguo 04/11/2009, 17:15
 
Fecha de Ingreso: noviembre-2009
Mensajes: 14
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: En IE la capa de la derecha se desplaza hacia abajo

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.
  #3 (permalink)  
Antiguo 04/11/2009, 17:19
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: En IE la capa de la derecha se desplaza hacia abajo

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...
  #4 (permalink)  
Antiguo 04/11/2009, 17:20
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: En IE la capa de la derecha se desplaza hacia abajo

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
  #5 (permalink)  
Antiguo 04/11/2009, 19:47
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 831
Antigüedad: 11 años, 1 mes
Puntos: 30
Respuesta: En IE la capa de la derecha se desplaza hacia abajo

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.
  #6 (permalink)  
Antiguo 04/11/2009, 20:24
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: En IE la capa de la derecha se desplaza hacia abajo

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:04.