Tema: Comportamiento contenedor
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/12/2009, 10:48
dani_cad
 
Fecha de Ingreso: septiembre-2009
Mensajes: 67
Antigüedad: 14 años, 7 meses
Puntos: 2
Comportamiento contenedor
Hola, necesito ayuda con el siguiente problema. Tengo organizado el contenido de una pagian html con css, que consiste en un contenedor (mad), dos encabezados (msp y enc), un menu lateral (menu) y un contenido central (contg, dividido a su vez en otros dos div - cont y ban).

El problema surge al incuir en "cont" contenido suficiente como para necesitar scroll. Su contenedor mad no se ajusta, haciendo que el color de fondo de este (celeste) no alcance a todo el contenido.

Como podria solucionarlo?

Adjunto los estilos y un ejemplo de archivo html.

Código CSS: 
Ver original
  1. html {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. body {
  7.     margin: 0;
  8.     padding: 0;
  9.     background-color: #EFFBFB;
  10.     background-repeat: repeat;
  11.     width: 100%;
  12.     height: 100%;
  13.     color: #184B75;    
  14.     background-image: url("../img/fon.gif");
  15.     font-family: Verdana, Arial, Helvetica, sans-serif;
  16. }
  17.  
  18. #mad {
  19.     position: absolute;
  20.     margin: 20px 17px 20px 17px;
  21.     padding: 0;
  22.     left: 0;
  23.     right: 0;
  24.     top: 0;
  25.     width: auto;
  26.     height: 95%;
  27.     background-color: #EFFBFB;
  28.     text-align: center;      
  29.     z-index: 0;    
  30. }
  31.  
  32. #msp {
  33.     position: absolute;
  34.     margin: 0;
  35.     padding: 0;
  36.     left: 0;
  37.     top: 0;
  38.     width: 153px;
  39.     height: 107px;
  40.     background-color: #195C92;
  41.     border-width: 1px;
  42.     border-style: solid;
  43.     border-color: #185B92;
  44.     z-index: 1;    
  45. }
  46.  
  47. #enc {
  48.     position: absolute;
  49.     margin: 0;
  50.     padding: 0;
  51.     left: 160px;
  52.     right: 1px;
  53.     top: 0;
  54.     width: auto;
  55.     height: 107px;
  56.     background-color: #155A91;
  57.     background-image: url("../img/lat.gif");
  58.     background-repeat: repeat;
  59.     border-width: 1px;
  60.     border-style: solid;
  61.     border-color: #185B92;
  62.     z-index: 1;    
  63. }
  64.  
  65. #menu {
  66.     position: absolute;
  67.     left: 0;
  68.     top: 114px;
  69.     width: 153px;
  70.     height: auto;
  71.     padding: 0;
  72.     margin: 0;
  73.     font-size: 12px;
  74.     background-color: #EFFBFB; /* celeste */
  75.     text-align: left;
  76.     z-index: 99999;
  77. }
  78.  
  79. #contg {
  80.     position: absolute;
  81.     margin: 0;
  82.     padding: 0;
  83.     left: 160px;
  84.     right: 1px;
  85.     top: 114px;
  86.     height: auto;
  87.     width: auto;
  88.     background-color: #FFFFFF;
  89.     z-index: 0;
  90. }
  91.  
  92. #cont {
  93.     position: absolute;
  94.     margin: 0;
  95.     padding: 1px;
  96.     left: 2px;
  97.     right: 1px;
  98.     top: 0;
  99.     height: auto;
  100.     width: 78%;
  101.     background-color: #FFFFFF;
  102.     border-width: 1px;
  103.     border-style: solid;
  104.     border-color: #185B92;
  105.     z-index: 1;
  106. }
  107.  
  108. #ban {
  109.     position: absolute;
  110.     margin: 0;
  111.     padding: 0;
  112.     left: 80%;
  113.     right: 1px;
  114.     top: 2px;
  115.     height: auto;
  116.     width: auto;
  117.     z-index: 1;
  118. }

Archivo html

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
  3. <html>
  4. <head>
  5. <link media="screen" href="css/est.css" type="text/css" rel="stylesheet">
  6. </head>
  7.  
  8. <body>
  9.  
  10. <div id="mad">
  11.  
  12. <div id="msp">
  13.     <p><IMG SRC="img/msp.gif" WIDTH="153" HEIGHT="107" BORDER="0" ALT="Msp"></p>
  14. </div>
  15.  
  16. <div id="enc">
  17.     <p><IMG SRC="img/enc.gif" WIDTH="586" HEIGHT="107" BORDER="0" ALT="MSP"></p>
  18. </div>
  19.  
  20. <div id="menu">
  21. "va el menu"
  22. </div>
  23.  
  24. <div id="contg">
  25.     <div id="cont">
  26. "va contenido, si se extiende se ve mal los bordes"
  27.     </div>
  28.     <div id="ban">
  29. "banners laterales"
  30.     </div>
  31. </div>
  32.  
  33. </div>
  34. </body>
  35. </html>

Muchas gracias por su ayuda y tiempo !
Última edición por webosiris; 14/12/2009 a las 21:08 Razón: agrego resaltado Highlight así se lee mejor el código