posicionar divs

[elena_22]

Hola a todos, busco ayuda para solucionar el posicionamiento de unos divs, les explico a detalle.

Tengo mi div header, div contenido y div footer, lo que quiero hacer es agregar un div flotante sobre el div footer con position:absolute y z-index, para que este encima del div contenido, he logrado hacer esto, pero cuando hago el navegador mas pequeño, el div flotante se sube a la mitad del div contenido, y no es lo que quiero, necesito que quede pegado al div footer, y que a su vez este sobre el div contenido, espero haberme explicado.

les paso lo que tengo:

<div id="container">
<div id="header"></div>
<div id="contenido"></div>
<div id="flotante"></div>
<div id="foot"></div>
</div>

el css:

#container{margin: 0 auto;text-align: left;}

#header{display: table; margin: 0 auto; width: 840px;}

#contenido{margin-top:30px;}

#flotante{background-color:#000000;filter: alpha(opacity=50); opacity: .9; height:150px; width:100%; position:absolute; z-index:1; display:none; bottom:8%;}

#foot {clear: both; color: #999999; font-size: 11px; height: 20px; position: relative; border-bottom:#1d1d1d solid 1px; border-top:#1d1d1d solid 1px; padding-top:5px;}


sé que el bottom:8% es el que hace que se suba el div hasta la mitad de la pagina, pero no se como solucionarlo sin el, mil gracias de antemano

[ArturoGallegos]

cuando posicionas un elemento este toma su posición con respecto a su elemento padre inmediato que cuente con la propiedad position o float

por lo que deberás posicionar el div container... o el que deseas que funcione como referencia, solo recuerda que debe ser un elemento padre no hermano ni hijo, puedes hacerlo con position:relative; y no afectara al resto de tus elementos

si lo amerita también asigna un ancho mínimo -> min-width (no funciona para IE6)

[elena_22]

Tienes toda la raon, muchisimas gracias por tu ayuda.

Saludos :)