margin dopo dei div float

[zoc]

ciao a tutti.
Non riesco a capire in una situazione di questo tipo

<div>
   <div>float</div>
   <div>float</div>
   <div>float</div>
   <div>clear both</div>
</div> 

il valore margin del div clear non venga assolutamente perso in considerazione.
Sapete perche?

grazie mille!

[testapazza]

Ciao zoc,
scusami tanto... Ma il risultato di quello che scrivi è questo:

loat
float
float
clear both

se tu devi assegnare lo stile devi farlo attraverso foglio estreno o incluso nell'head della pagina.

assegnando un'ID ai div o delle classi...

[zoc]

lo so, pensavo fosse intuitivo, era solo per farvi capire e non inserire tutto il codice...

<div id="footer_cnt">
    <div id="footer_cnt_01">Box 01

    Box 01

    Box 01

    Box 01 </div>
    <div id="footer_cnt_02">Box 02

    Box 01

    Box 01

    Box 01 </div>
    <div id="footer_cnt_03">Box 03

    Box 01

    Box 01 </div>
    <div id="copy">
      Bla bla bla bla bla bla
    </div> 

e questo il foglio di stile

#footer_cnt {
    margin: 0px auto;
    width: 980px;
}
#footer_cnt_01 {
    float: left;
    width: 450px;
}
#footer_cnt_02 {
    float: left;
    width: 200px;
    margin-left:100px;
}
#footer_cnt_03 {
    float: left;
    width: 200px;
    margin-left:10px;
}
#copy {
    clear: both;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e2e2;
    margin-bottom: 30px;
    overflow: hidden;
} 

grazie!!!!!

[zoc]

praticamente il problema è che il footer_cnt sembra non avere altezza. O meglio non si allunga fino alla fine degli elementi float. In dreamweaver, in visualizzazione, me le fa vedere correttamente, ma nei browser no.
Fra l'altro ho anche provato a mettere

    height:auto;
    overflow:hidden; 

ma non cambia nulla!
grazie!

[testapazza]

Ciao zoc,
scusa il ritardo ma sono stato impegnatissimo...
penso di aver risolto, prova così:

codice html:

<div id="footer_cnt">
    <div class="footer_cnt_01">Box 01

    Box 01

    Box 01

    Box 01 </div>
    <div class="footer_cnt_02">Box 02

    Box 01

    Box 01

    Box 01 </div>
    <div class="footer_cnt_03">Box 03

    Box 01

    Box 01 </div>
    <div class="copy">
      Bla bla bla bla bla bla
    </div>
</div>

codice CSS:

#footer_cnt {
    margin: 0px auto;
    width: 980px;
}
.footer_cnt_01 {
    float: left;
    width: 450px;
}
.footer_cnt_02 {
    float: left;
    width: 200px;
    margin-left:100px;
}
.footer_cnt_03 {
    float: left;
    width: 200px;
    margin-left:10px;
}
.copy {
    clear: both;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e2e2;
    margin-bottom: 30px;
    overflow: hidden;
}

l'ho testato e funziona...

buon lavoro...

[zoc]

grazie mille testa pazza, ma non ho capito cosa hai cambiato rispetto al mio codice
grazie ancora!

[testapazza]

Nei sotto div anzicchè l'ID ho messo la classe perchè tutti appartenenti allo stesso div padre e di conseguenza ho regolato il file css togliendo il "#" e inserendo il "." perchè non più "ID" ma "classe".

[zoc]

cavoli l'ho fatto.... e non funziona
non so proprio più che pesci pigliare!!!!

[zoc]

ho risolto così.... prima del div copy ho messo <div style="clear:both"></div>.
Così il margin di copy viene regolato da quel nuovo div vuoto.
Non sarà elegante ma almeno per ora mi risolve la questione
grazie mille!

[vdesigns]

Originariamente inviato da zoc
lo so, pensavo fosse intuitivo, era solo per farvi capire e non inserire tutto il codice...

<div id="footer_cnt">
    <div id="footer_cnt_01">Box 01

    Box 01

    Box 01

    Box 01 </div>
    <div id="footer_cnt_02">Box 02

    Box 01

    Box 01

    Box 01 </div>
    <div id="footer_cnt_03">Box 03

    Box 01

    Box 01 </div>
    <div id="copy">
      Bla bla bla bla bla bla
    </div> 

e questo il foglio di stile

#footer_cnt {
    margin: 0px auto;
    width: 980px;
}
#footer_cnt_01 {
    float: left;
    width: 450px;
}
#footer_cnt_02 {
    float: left;
    width: 200px;
    margin-left:100px;
}
#footer_cnt_03 {
    float: left;
    width: 200px;
    margin-left:10px;
}
#copy {
    clear: both;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e2e2;
    margin-bottom: 30px;
    overflow: hidden;
} 

grazie!!!!!

Funziona già tutto in questo modo, però il testo lo devi mettere all'interno di

</p>