Credo di non aver afferrato perfettamente il funzionamento dei div... Voglio dire, immaginiamoli come delle scatole. Nella mia visione razionale, un div che contiene un altro div, deve allargarsi in base al div contenuto: più aumenta l'altezza del div interno, più aumenta l'altezza del div esterno.
Perchè invece a volte non è così?
Ho un div "contenitore" che ospita 3 div (colonne). Per quale motivo, anche se le colonne sono alte 400px il div esterno rimane ad altezza 0?
Posta il codice CSS
Quando il box contenitore è posizionato in modo assoluto, è estratto dal normale flusso del coumento. Ciò implica che anche se la suo interno vi fossero altri box (anche non posizionati in modo assoluto) non ne terrebbe conto. Anche se il tuo box fosse flottante a destra o sinistra si avrebbe lo stesso risultato, ovvero eventuali box dentro ad un box con proprietà float: left non non si allargano per contenere i box interni.
Infatti è proprio per colpa dei vari float che ho questo problema!Originariamente inviato da houfqsufhquirfh
Posta il codice CSS
Quando il box contenitore è posizionato in modo assoluto, è estratto dal normale flusso del coumento. Ciò implica che anche se la suo interno vi fossero altri box (anche non posizionati in modo assoluto) non ne terrebbe conto. Anche se il tuo box fosse flottante a destra o sinistra si avrebbe lo stesso risultato, ovvero eventuali box dentro ad un box con proprietà float: left non non si allargano per contenere i box interni.
Il codice è molto semplice:
<div id="contenitore">
<div id="colonna_sinistra"></div>
<div id="colonna_centrale"></div>
<div id="colonna_destra"></div>
<div id="footer"></div>
</div>
Tieni conto che sia le colonne che il footer hanno un float (left o right che sia), quindi il div contenitore rimane ad altezza 0. Lasciando il float alle colonne destra e sinistra (che devono averlo per forza o non riuscirei a posizionarle) e togliendolo alla colonna centrale, come faccio a tenere il footer sotto se le colonne sono più lunghe della colonna centrale?! Le colonne laterali finirebbero per passare sopra al footer...
E come faccio a fare in modo che "contenitore" sia alto quanto le colonne laterali se queste non vengono prese in esame?
Non so se c'hai capito molto.... L'ho scritto un pò incasinato....
Non ho afferrato quale sia il tuo problema...Originariamente inviato da thirdeyeblind82
Infatti è proprio per colpa dei vari float che ho questo problema!
Il codice è molto semplice:
<div id="contenitore">
<div id="colonna_sinistra"></div>
<div id="colonna_centrale"></div>
<div id="colonna_destra"></div>
<div id="footer"></div>
</div>
Tieni conto che sia le colonne che il footer hanno un float (left o right che sia), quindi il div contenitore rimane ad altezza 0. Lasciando il float alle colonne destra e sinistra (che devono averlo per forza o non riuscirei a posizionarle) e togliendolo alla colonna centrale, come faccio a tenere il footer sotto se le colonne sono più lunghe della colonna centrale?! Le colonne laterali finirebbero per passare sopra al footer...
E come faccio a fare in modo che "contenitore" sia alto quanto le colonne laterali se queste non vengono prese in esame?
Non so se c'hai capito molto.... L'ho scritto un pò incasinato....
Se la struttura che vuoi fare consiste in tre colonne affiancate (mettiamo di 100x300 l'una) ed un footer (per esempio di 300x10), fai il contenitore di 300x310 con "position: relative;" nel CSS e agli altri div interni metti "position: absolute;". In questo modo dovresti riuscire a posizione facilmente i div interni nel contenitore con gli attributi "top", "left", "right"... anche senza usare i float, se ti creano problemi.
Poi, non capisco perché tu debba usare per forza i float per posizionare le colonne...
Spero di possa esser d'aiuto
Credo che in realtà vi sia una soluzione semplice, rendere il blocco contenitore anch'esso flottante.
Non avevo mai preso in considerazione il fatto di lavorare con position!
Purtroppo però il footer si posiziona subito sotto alla colonna centrale ed un'ipotetica colonna laterale più lunga gli passa sopra!
Per quanto riguarda il contenitore flottante, ho provato ma non funziona neanche quello!
Voi come fate di solito per una struttura di questo tipo?
Se posti il codice CSS sarà più facile aiutarti.Originariamente inviato da thirdeyeblind82
Non avevo mai preso in considerazione il fatto di lavorare con position!
Purtroppo però il footer si posiziona subito sotto alla colonna centrale ed un'ipotetica colonna laterale più lunga gli passa sopra!
Per quanto riguarda il contenitore flottante, ho provato ma non funziona neanche quello!
Voi come fate di solito per una struttura di questo tipo?
Prova ad inserire quindi così
la colonna NON flottante deve avere un'altezza predefinita in modo da superare le altre due. In questo modo le due colonne flottanti saranno meno alte, ma a fare l'altezza del contenitore sarà determinato dalla colonna non float e con altezza fissata.
Il footer dovrebbe a questo punto posizionarsi sotto, seguendo come "limite" la colonna alta in modo stabilito, così da definire anche l'altezza del blocco contenitore.
Altrimenti fai direttamente 3 colonne flottanti e un contenitore con altezza stabilita così posizioni poi il footer con la proprietà clear: left e dovrebbe posizionarsi sotto
Hai provato con a dare al footer un bel "clear:both;"??
Earn money for searching the internet:
Homepages Friends
lascia le larghezze dei div
togli le altezze
e al footer dai un clear both
Permessi di invio
Rispondi quotando