Newsgroup: it.comp.www.html
Titolo: Piazzare un div footer nel punto più basso

Ciao a tutti.
Sto impazzendo con un problema che mi sembra banale, ma forse non lo è.
Ho una pagina con vari elementi <div>, ma posso semplificare il problema 
solo con 3 elementi.
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
dove magari
#left {
    position: absolute;
    top:0;
    left:0;
    width: 200px;
}
#right {
    position: absolute;
    top:0;
    left: 200px;
    width: 600px;
}
#footer {
    left:0;
????
}
il problema è che entrambi i div left e right hanno altezze variabili e 
non determinabili a priori e vorrei che il footer si "azzeccasse" sotto 
il più lungo partendo dall'inizio della pagina a sinistra.
Ovviamente la difficoltà è che ovviamente non conoscendo a priori le 
dimensioni di height dei 2 div superiori non posso usare 
position:absolute. Inoltre non funziona neanche con un
#footer {
    position: absolute;
    bottom:0;
    left:0;
}
perché sia FF che IE come bottom non considerano la dimensione effettiva 
della pagina, ma quella dello schermo :-(((
Help me, please!!!
Grazie
giaconet 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 }
Non usare position:absolute (che andrebbe comunque usato il meno 
possibile, solo in casi eccezionali).
Dichiarali float: left e float: right, e metti il footer come clean:both;
 
Bye.


 Bye.
Grazie, ma forse ho semplificato troppo il problema :-)
In realta i div "centrali" sono di più, non 2. Minimo 3
<div id="menu"></div>
<div id="main"></div>
<div id="tool"></div>
e poi
<div id="footer"></div>
I div centrali hanno dimensioni in width fissate, ma non in height. Con 
float posso sistemare 2 div per farli stare laterali, ma quelli 
centrali?
Se inoltre non dichiaro float i div, il clear da solo non fa nulla, 
chiaramente.
Mi andrebbe bene anche il comportamento di FF con position:fixed, 
metterei bottom:0 e accorcerei semplicemente la pagina, ma me lo 
supporta solo FF, IE non ne vuole sapere :-|
Cmq grazie.
giaconet 


 supporta solo FF, IE non ne vuole sapere :-|
Come ti dicevo, absolute (e fixed ancora di piu`) vanno usati solo in casi 
molto particolari. Per quello che stai facendo tu ci sono decine di 
tecniche in giro coi float.
Prova a vedere layout gala. Una volta che l'hai capito (e` a 2-3 colonne, 
di base) puoi anche adattarlo a 4, 5 o piu` colonne.
Bye.



Eccezionale!
Grazie davvero. Mi hai risolto un problema che stava diventando enorme 
in un modo elegantissimo e semplicissimo.
Il modello funziona benissimo e "sopporta" anche i maltrattamenti ai 
quali lo sto sottoponendo per test.
Thank you! A buon rendere.
Bye
giaconet 


 disporranno uno a fianco dell'altro finche` c'e` spazio sul monitor.
Mi attacco qui, dato che appena ho letto dei float mi sono messo a 
provarli (sono nuovo in ambito css!) e mi hanno risolto un po' di cose 
(ma ne hanno complicate altre!). Questo è il mio problema:
http://img443.imageshack.us/my.php?image=5000lx6.png
Come vedi il nero della sidebar destra non copre tutto fino al footer ma 
si ferma prima. Se riduco il menu a sinistra (è un menu ad albero js) e 
la barra sinistra diventa più corta della destra allora il problema si 
inverte (si vede il grigio sotto la sinistra).
Tutto questo da quando ho messo float left e float right, 
rispettivamente per le barre sinistra e destra (il che mi ha risolto un 
po' di problemi di allineamento).
Questo dovrebbe essere il pezzo di CSS corrispondente:
#sidebar-left, #sidebar-right {
   width: 210px;
   vertical-align: top;
   background-color: #202122;
   //ho provato a sparare un height: 100%; ma non cambia niente
}
#sidebar-left {
   float:left;
   border-right: 2px solid #2c398e;
}
#sidebar-right {
   float:right;
   border-left: 2px solid #2c398e;
}
Se serve il css completo ditemi..
Grazie mille!


 inverte (si vede il grigio sotto la sinistra).
In generale non puoi farci niente, ma nel tuo caso particolare, avendo 
colonne di larghezza fissa in pixel, forse puoi rimediare con la tecnica 
"faux columns" o con qualche "workaround" come inglobare tutto in un div 
contenitore (o due) a cui metti come background con repeat-y una riga nera 
larga quando le colonne e allineata ai due lati.
Oppure con altri hack, tipo mettere il nero come sfondo della pagina/
contenitore, e poi il bianco per la colonna centrale assicurandoti, con un 
tag non semantico con clear:both, che sia piu` lunga delle laterali.
Bye.
