Os he puesto un código ya preparado abajo para que veáis un problema que no sé resolver o no entiendo.
Se trata de colocar un footer con una serie de elementos en cajas con a la izquierda.
El caso es que todo el footer debe tener un fondo longitudinal con el tamaño de toda la ventana del navegador.
El problema es que por alguna razón al darle float:left a las cajas en ese div, desaparece el fondo.
En fin, lo véis en el ejemplo, donde aparece esta sencilla estructura:
Código:
El div en all aparece centrado y con fondo en blanco.<html>
</head>
<body>
<div id="all">
<p>parrafo</p>
</div><!-- back -->
<div id="footer-outer">
<div id="footer-inner">
<div id="bottom">
<div class="box box1">
<p>parrafo</p>
</div>
<div class="box box2">
<p>parrafo</p>
</div>
</div>
</div>
</div>
</body>
</html>
El div footer-outer es el que tiene el fondo rojo en todo el ancho de la ventana del navegador.
El div footer-inner está centrado dentro de footer-outer y alberga los divs box.
Los divs box tienen un fondo azul y verde y van están colocados como cajas flotantes a la izquierda.
Esto es el resultado de intentar lograr el efecto de fondo ancho para el footer (footer-outer) después de ir desgranando toda una plantilla que lo tenía hasta quedarme con el esqueleto que véis.
Ahora, el problema es que no me gusta dejar cosas porque sí ni sin saber para qué son.
Véis ese div llamado "bottom", que alberga los dos box.
Tiene asignada la propiedad y valor overflow:hidden respectivamente.
Pues bien. Si lo eliminas o eliminas la regla con overflow:hidden, el fondo rojo del footer-outer desaparece.
No sé por qué. Tampoco sé qué puede significar overflow:hidden en este contexto y por qué hace aparecer el fondo.
Por supuesto, sé perfectamente para qué es hidden en overflow, pero que yo sepa aquí no hay ningún elemento saliente de la caja que haya que ocultar.
Considero ese elemento (bottom) superfluo. No sé qué hace ahí y querría quitarlo, pero si lo elimino el fondo rojo del footer-outer desaparece. Lo mismo con su propiedad.
¿Me podéis echar un vistazo al tema?
Me gustaría discutir sobre este asunto.
Os lo dejo aquí todo preparado para poner en un html.
Código:
<!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>
<style>
html,
body,
footer {
margin: 0;
padding: 0
}
body {
position: relative;
margin: 0;
padding: 0;
width: 100%
}
#all {
margin: 0 auto;
width: 996px;
padding: 0;
}
#bottom {
overflow: hidden
}
.box {
float: left
}
.box1 {
width: 754px;
background: #0066ff
}
.box2 {
width: 242px;
background: #006600
}
#footer-inner {
max-width: 1025px;
margin: 0 auto;
padding: 0
}
#footer-outer {
background: #ff0000
}
</style>
</head>
<body>
<div id="all">
<p>este es un texto de prueba para probar si esto funciona este es un texto de prueba para probar si esto funciona este es un texto de prueba para probar si esto funcionaeste es un texto de prueba para probar si esto funcionaeste es un texto de prueba para probar si esto funciona.</p>
</div><!-- back -->
<div id="footer-outer">
<div id="footer-inner">
<div id="bottom">
<div class="box box1">
<p>este es un texto de prueba para probar si esto funciona este es un texto de prueba para probar si esto funciona este es un texto de prueba para probar si esto funcionaeste es un texto de prueba para probar si esto funcionaeste es un texto de prueba para probar si esto funciona.</p>
</div>
<div class="box box2">
<p>este es un texto de prueba para probar si esto funciona este es un texto de prueba para probar si esto funciona este es un texto de prueba para probar si esto funcionaeste es un texto de prueba para probar si esto funcionaeste es un texto de prueba para probar si esto funciona.</p>
</div>
</div>
</div>
</div>
</body>
</html>
