[cssdesign] problema con div debordanti

[Mariangela Guatteri]

Claudia:

>>  (...) Il problema sta nel fatto che se nell contenitore il testo 
>> ingrandito con FF è molto grande il div sborda in basso e lascia le 
>> due colonne in alto.
>> Devo aver sbagliato la progettazione, potrei rimediare in qualche 
>> modo?
>> Tutti gli elementi sono flottanti – forse sono solo esaurita perché 
>> la soluzione è banale ma non ci arrivo.

Mariangela:
ciao Claudia, con FF su MacOS X il tuo codice non allinea comunque le 
colonne.
Non so se ho compreso bene il risultato che vuoi ottenere, ma tempo fa 
ho usato i listati che ti riporto sotto per realizzare un layout a 3 
colonne. La differenza e' che con questo codice la colonna di destra si 
allinea alla destra del corpo centrale (#centro) e non al bordo destro 
della finestra del browser.
Io l'ho testato sia su Mac che su Win con diversi browser e non mi pare 
dia problemi anche ingrandendo il testo a 800x600.
Prova un po'...
ciao

/* CSS*/
body  {
font-size: 100%;
font-family: Verdana, Arial, Helvetica, Geneva, ans-serif;
margin: 0 1px 0 0;
}
body {
background: #300;
color: #fff;
}
#colonna-sx, #colonna-dx {
float: left;
background:transparent;
color: #fff;
width: 30%;
}
#colonna-dx {
margin-right:-1px;
}
#colonna-sx .box, #colonna-dx .box {
padding: 0;
}
#centro {
float: left;
width: 40%;
margin-bottom: 4px;
background: #E4E2E7;
color: #000;
}
#centro .box {
margin: 0 5px;
padding: 0;
height: 120px;
}
#banner {
height: 44px;
color: #900;
background:#fff;
}

/*HTML*/
<div id="colonna-sx">
<div class="box">colonna sx</div>
</div>

<div id="centro">
<div class="box">
<div id="banner">banner</div>
</div>
<p>testo</p>
<p>testo</p>
<p>testo</p>
<p>testo</p>
</div>

<div id="colonna-dx">
<div class="box">colonna dx</div>
</div>