Comportamiento contenedor

dani_cad · #1 (**permalink**) 14/12/2009, 10:48

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 originalhtml {
    margin: 0;
    padding: 0;
}
 
body {
    margin: 0;
    padding: 0;
    background-color: #EFFBFB;
    background-repeat: repeat;
    width: 100&#37;;
    height: 100%;
    color: #184B75;    
    background-image: url("../img/fon.gif");
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
#mad {
    position: absolute;
    margin: 20px 17px 20px 17px;
    padding: 0;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    height: 95%;
    background-color: #EFFBFB;
    text-align: center;      
    z-index: 0;    
}
 
#msp {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 153px;
    height: 107px;
    background-color: #195C92;
    border-width: 1px;
    border-style: solid;
    border-color: #185B92;
    z-index: 1;    
}
 
#enc {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 160px;
    right: 1px;
    top: 0;
    width: auto;
    height: 107px;
    background-color: #155A91;
    background-image: url("../img/lat.gif");
    background-repeat: repeat;
    border-width: 1px;
    border-style: solid;
    border-color: #185B92;
    z-index: 1;    
}
 
#menu {
    position: absolute;
    left: 0;
    top: 114px;
    width: 153px;
    height: auto;
    padding: 0;
    margin: 0;
    font-size: 12px;
    background-color: #EFFBFB; /* celeste */
    text-align: left;
    z-index: 99999;
}
 
#contg {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 160px;
    right: 1px;
    top: 114px;
    height: auto;
    width: auto;
    background-color: #FFFFFF;
    z-index: 0;
}
 
#cont {
    position: absolute;
    margin: 0;
    padding: 1px;
    left: 2px;
    right: 1px;
    top: 0;
    height: auto;
    width: 78%;
    background-color: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-color: #185B92;
    z-index: 1;
}
 
#ban {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 80%;
    right: 1px;
    top: 2px;
    height: auto;
    width: auto;
    z-index: 1;
}

Archivo html

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<link media="screen" href="css/est.css" type="text/css" rel="stylesheet">
</head>
 
<body>
 
<div id="mad">
 
<div id="msp">
    <p><IMG SRC="img/msp.gif" WIDTH="153" HEIGHT="107" BORDER="0" ALT="Msp"></p>
</div>
 
<div id="enc">
    <p><IMG SRC="img/enc.gif" WIDTH="586" HEIGHT="107" BORDER="0" ALT="MSP"></p>
</div>
 
<div id="menu">
"va el menu"
</div>
 
<div id="contg">
    <div id="cont">
"va contenido, si se extiende se ve mal los bordes"
    </div>
    <div id="ban">
"banners laterales"
    </div>
</div>
 
</div>
</body>
</html>

Muchas gracias por su ayuda y tiempo !