Ciao a tutti! Ho un piccolo problema con l'altezza di un div...

codice HTML:
<div class="relative">
<p>Titolo...</p>
<div class="absolute1"></div>
<div class="absolute2"></div>
<div class="absolute3"></div>
<div class="absolute4"></div>
<p>TESTO</p>
</div>//fine del div relative
La mia situazione è più o meno quella sopra, con questo css:
codice:
.relative{
position:relative;
}
.absolute1,.absolute2,.absolute3,.absolute4{
position:absolute;
}//e vari top, bottom ecc opportuni.
Ho bisogno di usare "position:absolute" perché quei div (riempiti dinamicamente da jquery se js è attivato oppure generati lato php) contengono elementi grafici impossibili da posizionare diversamente, inoltre non conosco a priori l'altezza del contenuto.

Il problema è che il testo "TESTO" rimane dietro ai 4 div assoluti, e l'altezza di relative è minore dell'altezza dei 4 div (che vi sono contenuti).

Io vorrei che dopo la chiusura "absolute4" il testo andasse a capo sotto quest'ultimo (o meglio, che il div "relative" si chiudesse dopo il suo contenuto)...
Posso usare jquery per modificare l'altezza di volta in volta, ma sto sviluppando una pagina che funzioni anche senza js quindi non è la soluzione che fa per me... Come posso fare con i css?