Hola, no es la primera vez que me ocurre y nunca he podido resolverlo..
Estoy tratando de hacer un diseño web que ocupe el 100% de la pantalla, pero que el contenido esté centrado en un div de 985px de ancho y con position: absolute.
Me funciona bien con las secciones que le defino un "height", pero para el contenido donde van los artículos, menú lateral y demás no puedo definir una altura y se pone el contenido encima del footer..
Para que podáis verlo:
http://lacajatv.es/NUEVAWEB/
Podréis ver que el menú lateral se pone por encima. Traté de solucionarlo con overflow:hidden, pero no funciona.
¿Alguna solución?
Código CSS:
Ver original#clearfix {
width: 985px;
left: 50%;
margin-left: -492.5;
position: absolute;
}
#container {
background: #FFFFFF;
height: 100%;
overflow: hidden;
border-bottom: 1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
-webkit-box-shadow:inset 0px -1px 0 #e5e5e5;
-moz-box-shadow:inset 0px -1px 0 #e5e5e5;
box-shadow:inset 0px -1px 0 #e5e5e5;
}
#column_01 {
margin-top: 20px;
width: 660px;
float: left;
}
#column_02 {
margin-top: 20px;
margin-left: 25px;
width: 300px;
float: left;
}
#status {
background: #f5f5f5;
-moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
height: 100px;
}
#footer {
height: 100px;
}