Hola amigos, desistiendo de la anterior estructura de mi web creo que lo mejor es hacerla al completo con divs, ya realizada la estructura me queda saber como pongo un div abajo como pie de página que aunque crezca el contenido del otro div de arriba ésta se vaya siempre hacia abajo. Ahora me sucede que al meter contenido en la capa "contenido" esta atraviesa la capa "pie" como si nada.
La capa "centro" siempre quedará fija incluyendo la cabecera y demás. Pero necesito que las capas "lateral" y "contenido" sean elásticas.
Os pongo el código que he hecho con Dreamweaver a ver como lo véis.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PRUEBA</title>
<style type="text/css">
<!--
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#CAPOTA {
position:relative;
left:-20px;
top:-10px;
width:850px;
height:100%;
z-index:1;
background-color: #000000;
margin-left: auto;
margin-right: auto;
background-image: url(nuevaestructura2012/fondocapa.jpg);
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="estilo_principal_2012.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#BOTONERA { position:absolute;
left:0px;
top:150px;
width:850px;
height:24px;
z-index:2;
background-color: #FFCC00;
}
#CABECERA { position:absolute;
left:0px;
top:0px;
width:850px;
height:150px;
z-index:1;
background-color: #CCCCCC;
}
#LATERAL {
position:absolute;
left:0px;
top:175px;
width:200px;
height:848px;
z-index:3;
background-color: #999900;
}
#centro { position:absolute;
left:200px;
top:174px;
width:650px;
height:396px;
z-index:4;
background-color: #FF0000;
}
#contenido { position:absolute;
left:200px;
top:573px;
width:650px;
height:450px;
z-index:5;
background-color: #FF3366;
}
#pie { position:absolute;
left:0px;
top:1023px;
width:850px;
height:41px;
z-index:6;
background-color: #FFFF00;
}
-->
</style>
</head>
<body>
<div id="CAPOTA">
<div id="capa-sombra"> //-->
<div id="CABECERA">CABECERA</div>
<div id="BOTONERA">BOTONERA</div>
<div id="LATERAL">LATERAL</div>
<div id="centro">CENTRO</div>
<div id="contenido">CONTENIDO</div>
<div id="pie">PIE</div>
</div>
</div>
</body>
</html>