Div annidato e proprietà float

[Antonio85]

Mi sono accorto che se ho un div contenitore ed all'interno ho un altro div a cui imposto la proprietà float, questo è come se non fosse più contenuto nel div "padre", il quale assume un altezza nulla, mentre il div annidato esce fuori.
Mi confermate?
Se così fosse come posso risolvere?
Grazie

[floyd46]

ti conviene postare o il codice CSS oppuree scrivi il link alla pagina in rete.
ciao

[rebelia]

Originariamente inviato da Antonio85
Mi sono accorto che se ho un div contenitore ed all'interno ho un altro div a cui imposto la proprietà float, questo è come se non fosse più contenuto nel div "padre", il quale assume un altezza nulla, mentre il div annidato esce fuori.
Mi confermate?
Se così fosse come posso risolvere?
Grazie

se hai determinato l'altezza, dovrebbe succederti solo con firefox, se non ricordo male

puoi risolvere dando un padding-bottom al tuo div contenitore pari all'altezza che ti manca

a me e' capitato di avere delle pagine piu' lunghe e li' non c'erano problemi e delle pagine piu' corte (contatti, ad esempio); nel div contenitore di tali pagine, ho inserito una classe padding-bottom: 30px;

[Antonio85]

La pagina in questione è www.antonio-giuliana.it/contatti/ e come vedi si tratta anche a me di una pagina di contatti.
Il problema si è verificato con firefox ma non capisco per quale motivo se assegno la propietà float ad un div che si trova internamente ad un altro, è come se ognuno andasse per fatti suoi, uno sotto all'altro.
Facendo come hai proposto tu si risolve, ma preferisco lasciare tutto invariato invece di creare ancora un altro div ed assegnargli il padding-bottom solo per una pagina.
Se poi il problema è di IE e non di firefox e mi vengono date le motivazioni allora è un altro discorso.
Grazie

[rebelia]

non serve che tu crei un altro div:

<div id="contenitore" class="spaziatura">
   <div id="contenitore1">contenuto</div>
   <h2>contatti</h2>
   

Attualmente non siamo contattabili</p>
</div>

css:

#contenitore {width: 75%; height: 300px;}
#contenitore1 {width: 150px; height: auto; position: absolute; top: 10px; left: 0px;}
.spaziatura {padding-bottom: 50px;}

nelle pagine abbastanza lunghe non metterai la classe spaziatura, in quelle troppo corte la metterai

[zoom]

alt.
il div floattato (come dice la parola) "galleggia"
di conseguenza non è in grado di ridimensionare il div contenitore.
Per risolvere questo problema basta usare la proprietà clear che ripristina la situazione ideale e il div contenitore torna a funzionare "regolarmente".
io la proprietà di solito la applico a un br

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

da inserire sotto il div floattato.
non servono altezze in px, in percentuale, o altri artifizi.
basta usare clear e tutto tornerà come ti aspetti.

[rebelia]

vale anche per gli absolute, immagino, perche' anch'essi "si tolgono" dal flusso di codice :master:

[zoom]

gli absolute no, perchè non c'entrano proprio niente con il div che lo contiene.


io cerco di non usare mai absolute nella struttura principale anche per quello...

[Antonio85]

Oppure ci sarebbe anche un altro modo: quello di usare il min-height. E' quello che ho applicato io adesso e sembra funzionare bene.
Grazie a tutti

[zoom]

min-height però ti impone di sapere un'altezza minima. clear invece no...

inoltre min-height ti ricordo che non è supportato da ie (e quando mai?), quindi devi usare l'hack apposito sfruttando l'important