Foros del Web » Creando para Internet » CSS »

Cambia la altura en IE pero no en FF.

Estas en el tema de Cambia la altura en IE pero no en FF. en el foro de CSS en Foros del Web. Hola, tengo tres div, dos de ellos dentro del primero. El primero tiene un color de fondo que quiero que se vea cuando cambie la ...
  #1 (permalink)  
Antiguo 16/02/2010, 12:45
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Cambia la altura en IE pero no en FF.

Hola, tengo tres div, dos de ellos dentro del primero. El primero tiene un color de fondo que quiero que se vea cuando cambie la altura de uno de los div. Es decir, al crecer el div izquierda, la altura de este y de el de la derecha son diferentes.

El tema es que en IE el div alrededor crece a medida que crece el div izquierda, pero en FF no crece alrededor ¿por qué?

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#alrededor
	{
	background-color:#009900;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	width:960px;
	position:relative;
}
#izquierda	{
	background-color:#F8F8F8;
	width:260px;
	height:100%;
	float:left;
}

#derecha  {
	background-color:#F8F8F8;
	width:700px;
	height:100%;
	float:left;
}
-->
</style>
</head>
	<div id="alrededor">
		<div id="izquierda">
			<p>izquierda</p>
			<p>izquierda</p>
		</div>
		<div id="derecha">
			<p>derecha</p>
		</div>
	</div>
<body>
</body>
</html>
Gracias desde yá por las respuestas.
Saludos
  #2 (permalink)  
Antiguo 16/02/2010, 13:03
 
Fecha de Ingreso: enero-2010
Ubicación: Córdoba
Mensajes: 21
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Cambia la altura en IE pero no en FF.

El problema es que al flotar ambos <div> es como si el <div> que los contiene quedara «vacío». Antes se usaba el famoso «Clear-fix», pero no voy a entrar en detalles. Lo que tienes que hacer es al <div> contenedor colocarle el siguiente código CSS:

Código CSS:
Ver original
  1. div#alrededor {
  2. overflow: hidden;
  3. height: 1%;
  4. }

Y listo. Tendría que funcionar. Sé que el código que pusiste es sólo de ejemplo, pero te recomiendo lo siguiente:

1: Agrupa sentencias, para no repetir en vano ciertas propiedades.
2: Se más específico en el CSS, te evitará muchos problemas, y siempre sabrás a qué elemento estás haciendo referencia.

Código CSS:
Ver original
  1. div#alrededor {
  2. background-color:#009900;
  3. /* New */
  4. overflow: hidden;
  5. height: 1%;
  6. /* New */
  7. margin-left:auto;
  8. margin-right:auto;
  9. width:960px;
  10. position:relative;
  11. }
  12.  
  13. div#alrededor div#izquierda,
  14. div#alrededor div#derecha {
  15. background-color:#F8F8F8;
  16. width:260px;
  17. height:100%; /* Si haces esto no lograrás que ocupe el 100% del alto de su contenedor, por lo que es absurdo colocar este valor, ya que este <div> siempre tendrá SU PROPIO 100% producto del contenido que contenga.*/
  18. float:left;
  19. }
  20.  
  21. div#alrededor div#derecha  {
  22. background-color:#F8F8F8;
  23. width:700px;
  24. }

Espero que te sirva, ¡saludos!
  #3 (permalink)  
Antiguo 16/02/2010, 18:10
 
Fecha de Ingreso: agosto-2008
Mensajes: 12
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Cambia la altura en IE pero no en FF.

Cambia tu codigo un poco:
<html>
<head>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#alrededor
{
background-color:#009900;
height:auto;
margin-left:auto;
margin-right:auto;
width:960px;
position:relative;
overflow:hidden;/* para que no se sobrepongan los divs */
}
#izquierda {
background-color:#F8F8F8;
width:260px;
height:auto;/* dale un tamaño auto en el alto */
float:left;
}

#derecha {
background-color:#87CEEB;
width:700px;
height:auto; /* dale un tamaño auto en el alto */
float:left;
}
/* para q en ff no te muestre los paddings o margins predefinidos */
p {
margin:0;
padding:0;
}

-->
</style>
</head>
<div id="alrededor">
<div id="izquierda">
<p>izquierda</p>
<p>izquierda</p>
</div>
<div id="derecha">
<p>derecha</p>
</div>
</div>
<body>
</body>
</html>
  #4 (permalink)  
Antiguo 22/02/2010, 11:45
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Cambia la altura en IE pero no en FF.

Gracias por las respuestas.

lucianonicolas, tu ejemplo funcionó perfecto. Me gustaría saber por qué colocando height: 1%; resolvió el problema que yo tenía.

Saludos
  #5 (permalink)  
Antiguo 22/02/2010, 12:01
 
Fecha de Ingreso: enero-2010
Ubicación: Córdoba
Mensajes: 21
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Cambia la altura en IE pero no en FF.

En realidad, el secreto de esta «técnica» no está en el «height: 1%», sino en la propiedad «overflow: hidden;» ó «overflow: auto». Sinceramente, revisando la propiedad Overflow en las especificaciones del W3C {http://www.w3.org/TR/2004/CR-CSS21-20040225/visufx.html#overflow} no logro comprender porqué reacciona de esa forma con los elementos flotados ¡pero funciona!

Existen múltiples maneras de solucionar el problema que planteaste, bien de la forma en que yo te indiqué en mi mensaje anterior o, simplemente colocando «overflow: auto», pero ésta última no siempre funciona, así que para ahorrarme problemas siempre uso «overflow: hidden; height: 1%». De todas formas vos podés buscar la forma en que te quede más cómodo trabajarlo y realizar tus propios tests.

¡Saludos!

Aclaración: Cuando un elemento contiene sólo elementos flotados y no los abarca, es decir no los «rodea» {como te sucedió a vos}, no debe ser considerado como un error, ni siquiera como un problema de interpretación de los navegadores o cualquier cosa similar. Lo que para nosotros es un «problema» la mayoría de las veces, en realidad es la forma correcta en que según las especificaciones de CSS debe comportarse un elemento cuando contiene todos sus «hijos» flotados.

Etiquetas: altura, cambios
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 07:48.