Buenas!
Tengo el siguiente código en css:
/* CSS Document */
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#container {
width:1003px;
top:0px;
margin-left:auto;
margin-right:auto;
background-color:#000000;
position:relative;
}
#cabecera {
width:1003px;
height:160px;
position:relative;
background-color:#333333;
}
#container_principal {
width:1003px;
position:relative;
background-color:#666666;
margin-top:29px;
margin-bottom:29px;
/*height:300px;*/
}
#columna_izquierda {
width:224px;
position:relative;
float:left;
background-color:#999999;
margin-left: 16px;
}
#container_columna_derecha {
width:763px;
float:right;
position:relative;
background-color:#CCCCCC;
}
#container_cuadros {
width:224px;
position:relative;
}
#cuadros_izq_sup {
width:224px;
height:44px;
line-height:44px;
padding-left:55px;
position:relative;
margin:0px;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-cabecera.png);
}
#cuadros_izq_cen {
width:224px;
position:relative;
background-repeat:repeat-y;
padding-left:55px;
padding-top:15px;
padding-bottom:5px;
background-image:url(../imagenes/cuadros-centro.png);
}
#cuadros_izq_inf {
width:224px;
height:16px;
position:relative;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-inferior.png);
}
#pie_pagina {
width:1003px;
position:absolute;
background-color:#0066FF;
height:32px;
}
Y el siguiente código en 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=iso-8859-1" />
<title>Pruebas CSS</title>
<link rel="stylesheet" type="text/css" href="includes/estilos-pregunta.css" />
</head>
<body>
<div id="container">
<div id="cabecera"><img src="imagenes/cabecera.png" alt="cabecera" width="1003" height="160" /></div>
<div id="container_principal">
<div id="columna_izquierda">
<div id="container_cuadros">
<div id="cuadros_izq_sup">Título cuadro</div>
<div id="cuadros_izq_cen">
<p><br /><br /></p>
</div>
<div id="cuadros_izq_inf"></div>
</div>
</div>
<div id="container_columna_derecha">
<br /><br />
</div>
</div>
<div id="pie_pagina">PIE PAGINA</div>
</div>
</body>
</html>
El problema lo tengo con el div "pie_pagina", en internet explorer me lo pone bien, al pie de página, pero en firefox me lo pone inmediatamente después de la cabecera.
Si en el css le pongo una altura a #container_principal, entonces el pie de página aparece en la parte inferior, pero sin respetar el margin-bottom de #container_principal...
Seguro que me dejo algo, pero no lo veo...
Gracias!