Error con capas relativas

C_Cornell · #1 (**permalink**) 15/10/2008, 06:11

Tengo un error con capas relativas bastante extraño, respecto al posicionamiento del footer.

Según este css (simplificado), y teniendo en cuenta que en el html coloco estos elementos en el orden adecuado (cabecera, bloqueCentral, pie). Lo que cabría esperar es que el footer se colocara a continuacion del "bloqueCentral", sin embargo, se coloca debajo de la cabecera.

Código PHP:

  .cabecera {

    position: relative;

    width: 100%;

    height: 15%;

}

 
.bloqueCentral{

    position: relative;

    width: 100%;

}

 
.bloqueCentralIzq{

    position: absolute;

    height:auto;

    width: 20%;

    left: 0%;

}

 
.bloqueCentralDer{

    position: absolute;

    height:auto;

    width: 80%;

    left: 20%;

}

 
.pie{

    position:relative;

    width:100%;

}

He probado con alturas especificas el lugar de esos height:auto que veis arriba y el problema se mantiene.

Podría poner el footer con posicionamiento absolute pero como el bloque central tendrá una altura variable necesito hacerlo con posicionamiento relativo.

Bueno alguna idea de lo que pasa aquí? Gracias por la atención

kseso? · #2 (**permalink**) 15/10/2008, 06:27

Prueba a poner en tu css (otros lo llaman '.clear')

Cita:

.corte {
clear:both;

y en tu html, justo antes del pie:

Cita:

Mikmoro · #3 (**permalink**) 15/10/2008, 08:31

Cita:

Iniciado por C_Cornell

Lo que cabría esperar es que el footer se colocara a continuacion del "bloqueCentral"

No, no es correcto. Si te fijas, tienes los dos bloques de dentro del central con posición absoluta:

.bloqueCentralIzq{
position: absolute;
height:auto;
width: 20%;
left: 0%;
}

.bloqueCentralDer{
position: absolute;
height:auto;
width: 80%;
left: 20%;
}

Lo que se traduce en que no ocupan espacio físico real, por lo que el pie sale donde debería, es decir, como si esos bloque no existieran, y por tanto, su contenedor tampoco.

C_Cornell · #4 (**permalink**) 15/10/2008, 11:15

Gracias a los 2 por responder. Conseguí arreglarlo.

Mikmoro gracias! Cambie el posicionamiento de las capas izquierda y derecha por dos capas flotantes. Que incluyen capas relative.

Bueno este es el css:

Código PHP:

   
<style>

#bloqueCentral{

    width: 100%;

    overflow: hidden;

    min-height:100%;

    height:auto!important;

    height:100%;

    background-color: #FFFF00;

    position: relative;

}

 
#bloqueCentralIzq{

    width: 20%;

    background-color: #FFFFFF;

    z-index: 5;

    min-height:100%;

    height:auto!important;

    height:100%;

    float: left;

}

 
#bloqueCentralDer{

    width: 80%;

    background-color: #FF0000;

    z-index: 5;

    min-height:100%;

    height:auto!important;

    height:100%;

    float: right;

}

 
#pie{

    width:100%;

    height:3em;

    background-color: #666666;

    clear: both;

}

 
.cuadro1{

    position:relative;

bordes,margenes, etc...

}

 
.cuadro2{

    position:relative;

bordes,margenes, etc...

}

 
</style>

Es importante que como la altura se ajusta desde las capas interiores hacia la externas siempre se visualizan los elementos da igual el volumen que tengan los contenidos y de esa manera puedo luego establecer que la capa "contenedor" tenga overflow:hidden; debido a este atributo, hidden, la altura "dinamica" de la capa contenedor es obligada a calcularse y la capa "pie" se coloca correctamente. Dicho sea de paso, nos ahorramos lo de usar elementos auxiliares con "clear:both".

El html:

<body>
<div id="contenedor">
<div id="cabecera"></div>

<div id="bloqueCentral">
<div id="bloqueCentralIzq">
<div class="cuadro1">Menus, opciones, etc...</div>
</div>

<div id="bloqueCentralDer">
<div class="cuadro2">Contenidos....</div>
</div>
</div>
</div>

<div id="pie"</div>

</body>
</html>

Venga un saludo chicos