[css] problema absolute-relative

[Shork]

ciao a tutti

questo è il mio problema:

HTML

<div id="totale">
<div id="top">
TESTA
</div>
<div id="contenutoPagina">
CONTENUTO
</div>
</div>
<div id="bottom">
BOTTOM
</div>

CSS

#top{
width: 750px;
margin: 0px;
padding: 0px;
}
#totale{
width:750px;
}
#contenutoPagina{
position: relative;
left: 245px;
top: -302px;
width: 475px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
margin: 0px;
padding: 0px;
}
#bottom{
border: 2px solid #FF0000;
position: relative;
height: 20px;
width: 750px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
float: left;
}

Vorrei fare in modo che il div "bottom" finisse sotto il div "contenutoPagina" (contenuto dinamico da DB); se metto "position: relative" il div "bottom" mi rimane staccato dei pixel che ho messo come top (top: -302px mentre "position: absolute" esce fuori dal div "totale"...

Avete in mente comeposso fare?

Grazie in anticipo

[Francis87]

dai position relative al box contenitore e absolute a quello contenuto che vuoi posizionare come vuoi (rispetto al contenitore)

[Shork]

ho provato ma non funziona:

HTML

<div id="totale">
<div id="contenutoPagina"> CONTENUTO </div>
</div>

CSS

#totale{
border: 2px solid #ff9966;
position: relative;
left: 0px;
top: 0px;
width:750px;
display:block;
}
#contenutoPagina{
border: 2px solid #666666;
position: absolute;
left: 350px;
top: 100px;
width: 400px;
margin: 0px;
padding: 0px;
display:block;
}

Il bordo di "totale" non include il div "contenutoPagina"

:master:

[Shork]

UP