Salve a tutti,
sto disperatamente cercando di trovare una soluzione (al momento senza risultato) per la situazione sottostante.
Ho un div body che contiene al suo interno un div container, al quale interno ci possono essere altri div ad altezza variabile. Il tutto appare come di seguito:

codice:
<div id="body">
    <div id="container">
        <div id="boxSx">
            left
left
        </div>
        <div id="boxDx">
            right
        </div>        
    </div>
</div>
I due box possono contenere informazioni diverse per cui l'altezza della pagina è variabile.
Riporto ora la definizione dei miei div come nel mio css

codice:
#body {
    width: 100%;
    background: #E2E2E3;
    padding: 0px 0px 0px 0px;
}

#container {
    width: 940px;
    height: 100%;
    border: 0x;
    padding: 0px 0px 0px 0px;
    margin: 0 auto;
}

#boxSx {
    width: 470px;
    border: 0px;
    padding: 0px 0px 0px 0px;
    float: left;
    background: #808080;
}

#boxDx {
    width: 470px;
    border: 0px;
    padding: 47px 0px 0px 0px;
    text-align: right;
    float: left;
}
Il codice così scritto funziona in modo discreto, riesco ad avere la dinamicità che mi serve se non fosse che il div più esterno body ha una parte vuota, sotto boxDx e BoxSx, che non riesco ad eliminare.
Se definisco l'altezza "auto" o non la specifivo la formattazione dei div salta completamente (in pratica "auto" non ha effetto).

Esiste un modo per annidare tre div senza definirne l'altezza in modo assoluto?

Grazie,
saluti