Foros del Web » Creando para Internet » CSS »

Comportamiento contenedor

Estas en el tema de Comportamiento contenedor en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/12/2009, 10:48
 
Fecha de Ingreso: septiembre-2009
Mensajes: 67
Antigüedad: 8 años, 3 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. <link media="screen" href="css/est.css" type="text/css" rel="stylesheet">
  4. </head>
  5.  
  6.  
  7. <div id="mad">
  8.  
  9. <div id="msp">
  10.     <p><IMG SRC="img/msp.gif" WIDTH="153" HEIGHT="107" BORDER="0" ALT="Msp"></p>
  11. </div>
  12.  
  13. <div id="enc">
  14.     <p><IMG SRC="img/enc.gif" WIDTH="586" HEIGHT="107" BORDER="0" ALT="MSP"></p>
  15. </div>
  16.  
  17. <div id="menu">
  18. "va el menu"
  19. </div>
  20.  
  21. <div id="contg">
  22.     <div id="cont">
  23. "va contenido, si se extiende se ve mal los bordes"
  24.     </div>
  25.     <div id="ban">
  26. "banners laterales"
  27.     </div>
  28. </div>
  29.  
  30. </div>
  31. </body>
  32. </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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:58.