disposizione div a fondo pagina

[iraiscoming223]

Ciao a tutti, vedo che Another-Life aveva risposto ad una discussione simile ma che poi è degenerata (LOL)!
E la ricerca non da risultati migliori... =)

avrei bisogno di una piccola informazione: è possibile allineare un div a fondo pagina? Mi spiego:
Ho una pagina fatta così (tutta con div e css, ovviamente)

## TITOLO PAGINA - LOGO SITO ##
----------------------------------------------
................Corpo del sito....................
................Corpo del sito....................
................Corpo del sito....................
----------------------------------------------
##    @DIV A FONDO PAGINA    ##

Allora, cercherò di essere il più chiaro possibile: se il corpo del sito è piuttosto sostanzioso è ovvio che il @DIV finisce al bordo della finestra del browser. Ma se le righe del corpo sono soltanto due (supponiamo) il div resta immediatamente sotto queste. C'è un modo per allinearlo in basso senza per forza dover dipendere dal testo?? Grazie mille in anticipo!

[pezzo]

Ovviamente si, esistono diversi modi... dipende dal tipo di layout che scegli...

Dacci più dettagli! (tipo il codice XHTML e il CSS)

[iraiscoming223]

Vi eviterei il codice completo della pagina perchè è lungo e la pagina è creata con php, quindi... vi posto il css:

#logo
{
float:left;
border: none;
padding: 4px 4px;
top:12px;
left:10px;
}

#menubar
{
position:relative;
top:110px;
border: none;
height: 23px;
width: 800px;
background: url('images/menu_bar.png') #000000 repeat-x bottom left;
text-align:center;
}

#logindiv
{
float:right;
background: url('images/login_rect.png') center;
background-repeat: no-repeat;
border: none;
top:5px;
left:600px;
width:190px;
height: 92px;
overflow: inherit;
margin: 2px 2px 2px 2px;
text-align: center;
}

#footer
{
position: absolute;
width: 800px;
height: 50px;
border: none;
background: url('images/footer.png') #000000;
text-align: center;
font: italic 12px arial;
}

body
{ 
font: 10px;
font-family: Tahoma, Verdana, sans-serif;
background: top, center;
background-color: white;
background-image: url('images/defaultbackground.png');
background-repeat: repeat-x;
background-attachment: fixed;
padding: 0px 0px 0px 0px;
margin-top:0px;
margin-bottom:0px;
}

#layout {
background: white;
margin: 0px auto;
width: 800px;
height:100%;
margin-top:0px;
margin-bottom:0px;
}

#content
{
position: absolute;
top: 150px;
width: 800px;
padding: 0px 0px 0px 0px;
}

layout è il div che contiene tutto e che mi crea una colonna bianca in mezzo alla pagina,
logindiv, menubar e logo sono per il titolo e per tutte le cose che nel primo post ho riassunto in "TITOLO PAGINA - LOGO SITO", content è appunto dove sta il codice php dinamico, e footer è quello che vorrei allineare in fondo alla pagina.

Vi chiedo di essere clementi perchè il CSS, oltre ad essere incompleto, è stato creato da uno che è ancora alle prime armi con questo potente mezzo! Se ci sono errori palesi non esitate a farmeli notare, non mi offendo mica, anzi!!
Grazie mille ancora!

edit:Curiosando su CSS Playground ho trovato un sito che usa l'attrivuto bottom:0... E a me sembrava una soluzione stupida!! Grazie mille a tutti cmq!! Se avete metodi migliori ovviamente non esitate a postarli!!

[salasir]

Il problema del footer

[Another-Life]

[OT]: Quella guida la reputo abbastanza pessima...spero di analizzarla assieme a voi a breve...

[iraiscoming223]

grazie a tutti!! già che ci sono.. è così tragico il mio css?

[salasir]

Non l'ho guardato bene, mi sembra che si possa ottimizzare un pochino utilizzando le forme brevi, e forse ti manca qualche dichiarazione che potrebbe servirti più in là.

Ma niente di grave, mi sembra.


Domattina, se non hai già avuto risposte ci risentiamo.

[salasir]

Originariamente inviato da iraiscoming223

#logo
{
float:left;
border: none;
padding: 4px 4px;   <== se sono identici ne basta 1 
top:12px;              <== ? di solito si utilizzano con position: absolute 
left:10px;                     altrimenti basta margin: 12px 0 0 10px; 
}

#menubar
{
position:relative;
top:110px;
border: none;
height: 23px;
width: 800px;
background: url('images/menu_bar.png') #000000 repeat-x bottom left;  <== le posizioni 
background: #000 url('images/menu_bar.png') repeat-x bottom left; 
text-align:center;
}

#logindiv
{
float:right;
background: url('images/login_rect.png') no-repeat   center;
background-repeat: no-repeat;  <== via 
border: none;
top:5px;
left:600px;
width:190px;
height: 92px;
overflow: inherit;
margin: 2px 2px 2px 2px;   <==   margin: 2px;   
text-align: center;
}

#footer
{
position: absolute;
width: 800px;
height: 50px;
border: none;
background: url('images/footer.png') #000000;  <== vedi sopra 
text-align: center;
font: italic 12px arial;
}

body
{ 
font: 10px;
font-family: Tahoma, Verdana, sans-serif;
background: top, center;
background-color: white;
background-image: url('images/defaultbackground.png');
background-repeat: repeat-x;
background-attachment: fixed;
background: #000 url('images/defaultbackground.pn) repeat-x fixed top center;    <== forma breve 
padding: 0px 0px 0px 0px;    <==  padding: 0; 
margin-top:0px;
margin-bottom:0px;
}

#layout {
background: white;
margin: 0px auto;
width: 800px;
height:100%;
margin-top:0px;
margin-bottom:0px;
}

#content
{
position: absolute;
top: 150px;
width: 800px;
padding: 0px 0px 0px 0px;
}

Ovviamente le correzioni servono solo ad alleggerire il CSS non era sbagliato!
Chiaro che poi devi verificare se il risultato è quello voluto!

Ti suggerirei però di inserire qualche dichiarazione aggiuntiva (hx, link, ...)
Prendi qualche spunto da CSS pratici

[iraiscoming223]

grazie mille sei stato gentilissimo! Ovvio che il css che ho postato si riferisce solo alla parte di sito riguardante il layout e il posizionamento dei div..
Grazie per le correzioni, quando torno a casa le provo e ti faccio sapere!
Ciauz

[iraiscoming223]

Aribuongiorno a tutti! Ho modificato il CSS per far in modo che venga visualizzato il div a fondo pagina e la disposizione funziona a meraviglia! L'unica mia perplessità riguarda il fatto che il testo nel corpo della pagina "sparisce" sotto il div del footer. Dal momento che volevo evitare attributi tipo scroll per overflow ma volevo utilizzare la scrollbar del browser per spostarmi, come mi comporto? sono quasi sicuro che l'errore sia nella "gerarchia" dei div, ma non ne vengo a capo.. Vi posto il codice html e la parte del css aggiunta per il footer.

<div id="layout" >[img]images/logo.png[/img] 
  <div id="logindiv"><form action="login.php" method="post">asd</form></div>
  <div id="menubar">link1 link2 link3 link4</div><div id="content">  content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
</div><div id="footer">

site created with</div></div>

CSS:

#footer
{
position: absolute;
width: 800px;
height: 50px;
bottom: 0;
border: none;
background: #000000 url('images/footer.png');
text-align: center;
font: italic 12px arial;
}

Grazie mille in anticipo!

@salasir: sto correggendo il css secondo i tuoi consigli! =) Grazie ancora!