Hola a todos, estoy intentando hacer una web a base de capas y más o menos lo tengo enfocado. Solo tengo un problema que no se resolver.
La web tiene un div de contenido y otro de pie de págnia. Uno aparece debajo de otro sin problema:
<div id="Contenido" style="position:relative;width:800px;background-color:green;margin: 0 auto 0 auto">
Contenido
</div>
<div id="pie" style="width:800px;background-color:blue;margin: 0 auto 0 auto">
Pie de pagina
</div>
El problema surge cuando al intentar poner en el div de contido una tabla con una imagen de fondo a modo de div entonces el pie de página no sale debajo.
<div id="Contenido" style="position:relative;width:800px;background-color:green;margin: 0 auto 0 auto">
<div style="position:absolute;width:100px;height:100px; left:0px;top:0px;z-index:1;background-color:blue">
Aqui ponemos una imagen de fondo
</div>
<div style="position:absolute;width:100px;height:100px; left:0px;top:0px;z-index:2;background-color:blue">
<table>
<tr>
<td>
Aqui esta la tabla
</td>
</tr>
</table>
</div>
</div>
<div id="pie" style="width:800px;background-color:blue;margin: 0 auto 0 auto">
Pie de pagina
</div>
En este caso el div contenido no crece y por tanto el pie de página no queda debajo. Creo que es porque uso position absolute en los dos div dentro del "contenido" pero si no pongo el position absolute, si bien el div "pie" si queda debajo, los div internos con la imagen y la tabla quedan dentro de "contenido" pero uno debajo de otro y no uno sobre otro que es el efecto que busco.
Muchas gracias