Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/12/2012, 13:35
SeaPirates
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 786
Antigüedad: 15 años, 10 meses
Puntos: 9
Problema al tratar de centrar contenido en una web ancha

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
  1. #clearfix {
  2.     width: 985px;
  3.     left: 50%;
  4.     margin-left: -492.5;
  5.     position: absolute;
  6. }
  7.  
  8. #container {
  9.     background: #FFFFFF;
  10.     height: 100%;
  11.     overflow: hidden;
  12.     border-bottom: 1px solid #FFFFFF;
  13.     border-bottom:1px solid #FFFFFF;
  14.     -webkit-box-shadow:inset 0px -1px 0 #e5e5e5;
  15.     -moz-box-shadow:inset 0px -1px 0 #e5e5e5;
  16.     box-shadow:inset 0px -1px 0 #e5e5e5;
  17.  
  18. }
  19.  
  20. #column_01 {
  21.     margin-top: 20px;
  22.     width: 660px;
  23.     float: left;
  24. }
  25.  
  26. #column_02 {
  27.     margin-top: 20px;
  28.     margin-left: 25px;
  29.     width: 300px;
  30.     float: left;
  31. }
  32.  
  33. #status {
  34.     background: #f5f5f5;
  35.     -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
  36.     -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
  37.     box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
  38.     height: 100px;
  39. }
  40.  
  41. #footer {
  42.     height: 100px;
  43. }