[CSS] Firefox Div annidati

Premetto che sto cercando di capire un po' come funzionano i CSS...ma ho un problema in partenza :lol:

Voglio fare un grande DIV che contenga 3 Div più piccoli (sinistra, centro e destra).

Con Explorer l'effetto che ottengo è proprio quello voluto, mentre se visualizzo con Firefox i 3 Div piccoli escono fuori dal Div che dovrebbe racchiuderli...dove sto sbagliando? :???: :|

Questo è il CSS:

Codice:

---

#centralBig {
        border : 3px solid Black;
        background: #656c4a;
        font-family: Verdana; 
        font-size: 13px;
        width: 90%;
        margin: 100px auto 0 auto
}


.divcentrale {
        border : 1px solid red;
        width:33%;
        float:left;
        position: relative;
        text-align:center
}

.divsinistra {
        border : 1px solid red;
        width:33%;
        float:left;
        position: relative;
        text-align:center
}

.divdestra {
        border : 1px solid red;
        width:33%;
        float:left;
        position: relative;
        text-align:center
}

---

e questa la parte di HTML

Codice:

---

<div id="centralBig">
Area del div grande
<div class="divsinistra">
Div sx
</div>
<div class="divcentrale">
Div ctr
</div>
<div class="divdestra">
Div dx
</div>
</div>

---

Grazie!

Credo di aver capito l'"errore" (anche se proprio non è colpa tua): si tratta di una diversa interpretazione dello stile width.
Internet Explorer disegna i 3 div interni larghi il 33% di quello che contiene, mentre Firefox li disegna larghi il 33% della pagina (33 + 33 + 33 = 99, il div grande è largo 90 quindi ecco perché ti "sbordano").

Nel mio sito, avendo un problema simile, avevo risolto impostando la proprietà "width" per IE ed entrambe le "max-width" e "min-width" (che IE6 non era in grado di capire) per Firefox, nel tuo caso dovresti scrivere (per i DIV interni):

Codice:

---

width:33%; max-width:30%; min-width:30%

---

Non so però se la cosa funziona ancora con IE7 (beh, se ti riferisci al mio sito, quello si vede ancora bene...).

Stammi bene...

Grazie della risposta...
ho fatto un po' di prove e non funziona però :???:
Ho eliminato le % che potevano "disturbare" però l'effetto che vedo con Firefox è sempre lo stesso:

Un DIV grande con bordo spesso nero e la scritta "Area del div grande"
Tre DIV piccolini, il cui bordo superiore si sovrappone al bordo inferiore del DIV grande.

EDIT: Togliendo il " float:left;" dai 3 div piccoli, sia con FireFox che con IE vengono visualizzati all'interno del DIV nero, però in colonna :|

Sto usando questo CSS

Codice:

---

.centralBig {
        border : 3px solid Black;
        background: #656c4a;
        font-family: Verdana; 
        font-size: 13px;
        width: 500px;
        margin: 100px auto 0 auto;
}


.divcentrale {
        border : 1px solid red;
        width:100px;
        float:left;
        position: relative;
        text-align:center
}

.divsinistra {
        border : 1px solid red;
        width:100px;
        float:left;
        position: relative;
        text-align:center
}

.divdestra {
        border : 1px solid red;
        width:100px;
        float:left;
        position: relative;
        text-align:center
}

---

Non so se ti posso aiutare ma sul mio sito trovi un esempio di come costruire un layout a tre colonne ...... guarda nella sezione HTML.....ciao fammi sapere se ti è stato utile... :=):

anche a me lo faceva
devi inserire subito dopo i tre div annidati questo:

Codice HTML:

---

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

---

cià!

Grazie a tutti!
In effetti ho risolto proprio prendendo un layout a 3 colonne e riadattandolo.
Grazie di nuovo :wink: