Cambia la altura en IE pero no en FF.

ci2000 · #1 (**permalink**) 16/02/2010, 12:45

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

lucianonicolas · #2 (**permalink**) 16/02/2010, 13:03

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 originaldiv#alrededor {
overflow: hidden;
height: 1%;
}

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 originaldiv#alrededor {
background-color:#009900;
/* New */
overflow: hidden;
height: 1%;
/* New */
margin-left:auto;
margin-right:auto;
width:960px;
position:relative;
}
 
div#alrededor div#izquierda,
div#alrededor div#derecha {
background-color:#F8F8F8;
width:260px;
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.*/
float:left;
}
 
div#alrededor div#derecha  {
background-color:#F8F8F8;
width:700px;
}

Espero que te sirva, ¡saludos!

rctmac · #3 (**permalink**) 16/02/2010, 18:10

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">

</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>

ci2000 · #4 (**permalink**) 22/02/2010, 11:45

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

lucianonicolas · #5 (**permalink**) 22/02/2010, 12:01

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.