quiero colocar un div debajo de otro div que tiene position:absolute, height:auto

[belencruzp]

Hola a todos!
Soy nueva con esto del HTML y del CSS y tengo un problema con un div que es el pie de la página. Tengo 4 div: cabecera, menu, contenido y pie.
La cabecera y el menu tienen position:fixed para que se queden fijos y el contenido tiene height:auto, position:absolute y z-index:-1 para que se vaya detrás de la cabecera y el menu, no importa cuán largo sea su contenido. La verdad es que no sé qué estoy haciendo mal con el pie, el tema es que el contenido se lo come. el pie no quiere salir dentro del contenido por más que los div están por separados.
Copio y pego el HTML y el CSS. Espero que me puedan ayudar!!!

HTML
<div id="contenedor">

<div id="cabecera">
<a href="index.html"><img src="img/belencruz.png" /></a>
</div>

<div id="menu" align="center">
<ul>
<li class="celda"><a href="#">cv</a></li>
<li class="celda"><a href="sobre_mi.html">sobre m&iacute;</a></li>
<li class="celda"><a href="#">mis proyectos</a></li>
<li class="celda" style="margin-right:0px;"><a href="#">portafolio</a></li>
</ul>
</div>

<div id="contenido_ppal">

<div id="bienvenido">
<img src="img/bienvenido.jpg" class="bienvenido" />
</div>

</div>

<div id="pie">
<div id="pie_izq">
&copy; Bel&eacute;n Cruz 2011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Barcelona-Espa&ntilde;a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;M. +34 xxx xxx xxx
</div>
<div id="pie_der">
<a href="index.html">Castellano</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="en/index.html">English</a>
</div>
</div>
</div>

CSS
#cabecera {
background:url(../img/bgfondo.jpg) repeat-x fixed;
width:900px;
height:115px;
text-align:center;
background-color:#cccccc;
position:fixed; /*cambio*/
z-index:10000; /*cambio*/
}

#menu {
width:900px;
height:28px;/*cambio*/
background-color:#cccccc;
padding-top:10px; /*cambio*/
top:115px;
position:fixed; /*cambio*/
z-index:10001; /*cambio*/
}

#contenido_ppal {
width:860px;
height:auto;
background-color:white;
position:absolute; /*cambio*/
top:153px; /*cambio*/
z-index:-1; /*cambio*/
padding:10px 20px 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

#pie {
width:900px;
height:20px;
padding-top:3px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:8pt;
color:white;
margin-top:10px;
background:url(../img/bgpie.png) no-repeat;
}

Muchas gracias por adelantado!
Belén

[opzina]

El pie de pagina esta dentro del contenedor.

[belencruzp]

Hola Opzina!
Gracias por tu respuesta. La verdad es que tenía varios detalles (o muchos) y no era precisamente el tener el div del pie dentro del contenedor porque siempre lo he hecho así.
La solución estaba en cambiar el position en el #contenido_ppal y el z-index (estaba en -1 y lo coloqué en 1):

#contenido_ppal {
width:860px;
overflow:auto;
background-color:white;
position:relative;
top:153px;
z-index:1;
padding:10px 20px 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Y darle al #pie un position también con el mismo top del #contenido_ppal:

#pie {
width:900px;
height:20px;
padding-top:3px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:8pt;
color:white;
margin:10px auto 0 auto;
background:url(../img/bgpie.png) no-repeat;
position:relative;
top:153px;
}

El HTML quedó igual, con el div del #pie dentro del #contenedor. Mis problemas además de que el #contenido_ppal se tragaba el #pie, era que el #contenido_ppal con el z-index:-1 no me dejaba seleccionar lo que estaba adentro una vez veías el preview y era símplemente cambiar el -1 a 1. Ahora todo me funciona.
Espero este post le sirva de ayuda a alguien que tenga problemas con los position, pues era lo que me estaba dañando el funcionamiento de la web.
Saludos!!!
b