incolonnare e allineare div nidificati

[-AA-]

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

<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

.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?

[Mich_]

Probabilmente ti manca il clear (vedi ad esempio [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float)

Infatti il float sposta il blocco fuori dalla logica degli altri contenitori, che quindi si chiudono senza tenerne conto.
Conil clear rimetti le cose a posto.

[-AA-]

Grazie Mich_
Utilizzando clear sul footer questo si piazza al suo posto, mentre per il div content non cambia nulla, il div content rimane appiccicato in alto senza considerare i 2 div contenuti (sx e dx) lo vedo perchè il div content ha 1 immagine di sfondo uff....

[-AA-]

Allego l'immagine della situazione attuale con l'aggiunta del clear : both nella classe footer e nella classe spacerbianco

la parte del content che contiene i 2 div non si adatta al suo contenuto

[Mich_]

Il clear va messo all'interno del blocco contenitore, prima della sua fine.

Nel link postato sopra c'e` un esempio (realizzato con lo pseudo-elemento :after)

[-AA-]

capito
fatto

funziona

grazie per le dritte!