IE vs FIREFOX. DUDA

alamarcheta · #1 (**permalink**) 17/03/2006, 11:42

Muy buenas. Estoy maquetando una Web y quiero que la capa que tiene el contenido se auto ajuste de alto y la capa que contiene el pie se quede justo debajo. Ejemplo:

Lo he conseguido hacer para IE pero en FIREFOX no hay manera. Os dejo el código para que le echeis un vistazo y ver si me podeis echar una mano.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>prueba</title>
<style type="text/css">
body {font: 10px Verdana; color:#333333;margin: 0px; padding: 0px;}
a {text-decoration:none;font-weight:bold;color:#666666}
a:hover {color:#004EA0}
#contenedora {PADDING-RIGHT: 0px; PADDING-LEFT: 0px;;MARGIN:0px auto; WIDTH: 734px; height:566px; POSITION: relative; voice-family:inherit; background-color:#99CC66}
#contenido{position:absolute;width:683px;height:auto;background-color:#FFCC00;z-index:0;left: 25px;	top: 156px;}
#pie{background-color:#33CCFF;width:683px;height:31px;position:relative;top:0px;left:0px; font-size:9px; word-spacing:-1px}

.Float
{
	width: 263px;
	height:90px;
	float:left;
	padding-bottom:10px;
	padding-left:20px;
}

.FloatRight
{
	padding-left:-10px;
	float:left;
	width: 263px;
	height:90px;
	padding-bottom:10px;
}
.Img
{
	float:left;
	padding-right:5px;
}
</style>

</head>
<body>
<div id="contenedora">
<div id="contenido">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class='Float'>
				
				<div>
				<img src="img/juan.jpg" width='140' height='90' border="0" align='left' class='Img'/>
					Ref.: <strong>111</strong><br />
					Box: <br> 85 x 18,5 cm.<br />

					Std.: 6<br />
					Vol. m3: <br />
								  </div>
			  
</div>
<div class="FloatRight">
				
				<div>
				<img src="img/juan.jpg" width='140' height='90' border="0" align='left' class='Img'/>
					Ref.: <strong>111</strong><br />
					Box: <br> 85 x 18,5 cm.<br />

					Std.: 6<br />
					Vol. m3: <br />
								  </div>
			  
</div>
<div class='Float'>

				<div>
				<img src="img/juan.jpg" width='140' height='90' border="0" align='left' class='Img'/>
					Ref.: <strong>111</strong><br />
					Box: <br> 85 x 18,5 cm.<br />

					Std.: 6<br />
					Vol. m3: <br />
								  </div>
			  
</div>
<div class="FloatRight">
				
				<div>
				<img src="img/juan.jpg" width='140' height='90' border="0" align='left' class='Img'/>
					Ref.: <strong>111</strong><br />
					Box: <br> 85 x 18,5 cm.<br />

					Std.: 6<br />
					Vol. m3: <br />
					
								  </div>
			  
</div>
<div id="pie"></div>

</div>
</div>
</body>
</html>

Saludos.

lancer · #2 (**permalink**) 17/03/2006, 12:53

para comenzar has mandado el codigo que no es el del grafico.. pero no importa. lo unico que tienes que hacer es aumentar el siguiente codigo en el div #pie
pones lo que esta entre las lineas punteadas:

-------------
clear: both;
-------------

debajo de relative por ejemplo. y vas a ver como esa barra azul baja. te recomiendo que tambien te instales Opera.
saludos!

alamarcheta · #3 (**permalink**) 20/03/2006, 02:07

Correcto. Merci