Final de la página se ve mal

[kristian159]

Empezaré explicando mi estructura:

tengo una capa total que tiene estos valores:

position: absolute;
width: 100%;
height: 250%;

despues tengo una llamada contenido que es donde añado lo que tiene la web, noticias, otras capas dentro y demás y el problema es el footer, no puede verse bien, estoy casi convencido de que es por el height de la capa total pero no sé como solucionarlo.

el contenido tiene estos valores:

top: 7.5%;
left: 20%;
width: 60%;
min-height: 100%;
height:auto;

la web por debajo aparece así: lo azul es el total, blanco contenido, verde es una capa donde pongo pestañas dinámicas y lo rosita que se ve es una capa lateral también dentro de contenido.




no sé si ha quedado claro pero más o menos eso es lo que tengo.

me gustaria que donde se ve lo gris, quedase el footer ocupando todo el width.

[C2am]

Mejor muestra todo el html y css que intervienen en esta maquetación, o un enlace.

Como primer comentario, no es buena idea ese

Código CSS:

position:absolute
 

en la caja o división (no capa) total.

Saludos

[kristian159]

lo dejo en foto quitando partes de php que solo molestarían :





CSS:

#total{
background-image:url(../img/fondo.png);
repeat-x;
repeat-y;
background-color: blue;
position: absolute;
width: 100%;
height: 250%;
z-index: 1;
left:0px;
top:0px;
}
#banner{
background-image:url(../img/fondo_banner.png);
repeat-x;
repeat-y;
background-color: blue;
width:100%;
height:5%;
background-color: blue;
}

#menu{
position: absolute;
width: 60%;
height: 100%;
left: 20%;
z-index:2;
padding: 0;

}



#contenido{
top: 7.5%;
left: 20%;
width: 60%;
min-height: 100%;
height:auto;
background-color: white;
z-index:1;
position: absolute;
}

#lateral{

left: 72%;
width:27%;
height: 20%;
background-color: pink;
position: absolute;
top:16.5%;
}

#slider{
position: absolute;
width: 70%;
height: 11%;
left: 1%;
top: 0.5%;
}

#novedades{
background-color: black;
position: absolute;
width: 68.5%;
height: 7%;
left: 1.9%;
top: 16.5%;
}
#footer{
}

[C2am]

Utiliza el highlight para publicar código, y publica el html generado por el php, es decir, abre desde el navegador tu página, haz click derecho "ver código fuente" y copia ese html generado.

Lo anterior es para que sepas como postear correctamente.

Código CSS:

#total{
background-image:url(../img/fondo.png) repeat-x repeat-y;
background-color: blue;
position: absolute;
width: 100%;
height: 250%;
z-index: 1;
left:0px;
top:0px;
}
#banner{
background-image:url(../img/fondo_banner.png) repeat-x repeat-y;
background-color: blue;
width:100%;
height:5%;
background-color: blue;
}
 
#menu{
position: absolute;
width: 60%;
height: 100%;
left: 20%;
z-index:2;
padding: 0; 
 
}
 
 
 
#contenido{
top: 7.5%;
left: 20%;
width: 60%;
min-height: 100%;
height:auto;
background-color: white; 
z-index:1;  
position: absolute;
}
 
#lateral{
 
left: 72%;
width:27%;
height: 20%;
background-color: pink;
position: absolute;
top:16.5%;
}
 
#slider{
position: absolute;
width: 70%;
height: 11%;
left: 1%;
top: 0.5%;
}
 
#novedades{
background-color: black;
position: absolute;
width: 68.5%;
height: 7%;
left: 1.9%;
top: 16.5%;
}
#footer{
}
 

Y esto es lo que obtengo al copiar tu código: http://jsfiddle.net/c2am/7qB4n/7/embedded/result/ corrigiendo lo de "repeat-x; repeat-y;"

Ahora, ¿cómo debería quedar?