Ho un problemino con una struttura composta da alcuni DIV.
La struttura è questa

codice:
<div class="content">

<div class="sx"></div>
<div class="dx"></div>


</div>


<div class="spacerbianco"></div>
<div class="footer"></div>
è molto semplice, c'è 1 DIV contenitore che al suo interno ha 2 DIV che dovrebbero essere 2 colonne per contenuti separati, poi chiudo il tutto, alla fine ci sono altri 2 DIV usati per creare il Footer.

Il foglio di stile di questi DIV è questo
codice:
.content{
background-image:url(images/sf_content.gif);
width:1000px;
margin:auto;
padding-bottom:15px;
}

.sx{
background-image:url(images/logo.jpg);
background-position:top left;
background-repeat:no-repeat;
float:left;
margin-left:5px;
width:310px;
}

.dx{
float:left;
margin-left:15px;
width:660px;
padding-top: 25px;
}

.spacerbianco{
background-color:#FFFFFF;
height:10px;
width:1000px;
margin:auto;
}

.footer{
margin:auto;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
width:1000px;
height:67px;
padding-top:52px;
}
Il mio problema è che il div content come il footer si posizionano in alto sovrapposti ai 2 DIV SX e DX invece dovrebbe essere che ...il div content si allunga tanto quanto i contenuti dei 2 DIV (SX e DX) mentre il footer si dovrebbe piazzare alla fine e basta.


Eliminando il FLOAT: LEFT; per il DIV DX si sistema tutto ma ovviamente viene a meno l'afiancamento dei 2 div.

dove sbaglio?