[CSS] div infame

[0rph3n]

sciao raghi,
ho una struttura del genere:

<div class="sottoSezione">
   <div class="riga">      -
      <div class="sx">     |
         <span>xxx</span>  |
      </div>               |     sezione ripetuta n volte
      <div class="dx">     |
         <span>xxx</span>  |
      </div>               |
   </div>                  -
</div>

le varie classi hanno queste proprietà:

.sottosezione{width:100%; margin:0; padding:0; border:1px solid #CCCCCC;}
.riga{width:100%; margin:0; padding:0; border:none; text-align:left; clear:both;}
.sx{float:left; width:30%; margin:0; padding:0; border:none; text-align:left;}
.dx{float:right; width:70%; margin:0; padding:0; border:none; text-align:left;}

il problema consiste nel fatto che quando questa struttura viene visualizzata con firefox il bordo inferiore del div con classe sottosezione, non coincide con il bordo inferiore dell'ultimo div con classe riga presente al suo interno, ma con quello del penultimo, come se l'ultima riga non fosse all'interno della sottosezione!
dove stà l'errore?

grassie, 'iao

[0rph3n]

perchè ste cagate mi vengono in mente solo dopo aver postato?!
beh se a qualcuno interessa ci voleva un float anche sulla classe sottoSezione

'iao

[andbin]

Originariamente inviato da 0rph3n

il problema consiste nel fatto che quando questa struttura viene visualizzata con firefox il bordo inferiore del div con classe sottosezione, non coincide con il bordo inferiore dell'ultimo div con classe riga presente al suo interno, ma con quello del penultimo, come se l'ultima riga non fosse all'interno della sottosezione!
dove stà l'errore?

Quando usi la proprietà "float" devi prestare molta attenzione, perché l'elemento su cui imposti il float viene, per dirla in breve, "tolto" dal flusso ordinario della pagina.

Ecco una semplice soluzione:

<div class="sottoSezione">
    .....il tuo codice....

    <div style="clear:both"></div>
</div>

Poi se invece di mettere lo stile inline nel tag vuoi metterlo come classe o id, va anche bene!