Newsgroup: it.lavoro.professioni.webmaster
Titolo: Allineare un div a fondo pagina

Come da oggetto, vorrei che il div "bottom" fosse allineato a fondo
pagina indipendentemente dall'altezza del left e del main; un po' come
quando si usavano le tabelle e si metteva ad esempio:
- height 100% alla tabella
- height 50px all'header
- nessuna altezza al left ed al main
- height 50px al bottom
Vi posto il codice HTML ed il CSS.
PS: ho cercato in italiano ed in inglese su google e su altri mdr ma
non ho trovato nulla...
Grazie a tutti.
Codice HTML della pagina
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" lang="it">
	<head>
		<title>Layout fisso a due colonne</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id="container">
			<div id="header">header<br /></div>
			<div id="left">left<br /></div>
			<div id="main">main<br /></div>
			<div id="bottom">bottom<br /></div>
		</div>
	</body>
</html>
Foglio di stile
* {
	color: #666666;
	font-size: 100%;
	margin: 0;
	padding: 0;
}
body {
	background-image: url(bg.gif);
	background-position: center;
	background-repeat: repeat-y;
	margin: 0 auto 0 auto;
	text-align: center;
}
div#container {
	border: 0px #000000 solid;
	margin: 0 auto 0 auto;
	padding:0px;
	position: relative;
	text-align: left;
	width: 700px;
}
div#header {
	border: 1px #000000 solid;
	height: 100px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 698px !important;
	width/**/: 700px;
}
div#left {
	border: 1px #000000 solid;
	float: left;
	padding:0px;
	text-align: left;
	width: 148px !important;
	width/**/: 150px;}
div#main {
	border: 1px #000000 solid;
	float: left;
	padding:0px;
	text-align: left;
	width: 548px !important;
	width/**/: 550px;
}
 div#bottom {
	border: 1px #000000 solid;
	clear: both;
	height: 30px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 698px !important;
	width/**/: 700px;
}

pagina indipendentemente dall'altezza del left e del main; un po' come
Prova un po' cosě...
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" lang="it">
	<head>
		<title>Layout fisso a due colonne</title>
	<style>
 
html, body {
		height: 100%}
body {
	background-image: url(bg.gif);
	background-position: center;
	background-repeat: repeat-y;
	margin: 0 auto 0 auto;
	text-align: center;
}
div#container {
	border: 0px #000000 solid;
	margin: 0 auto 0 auto;
	padding:0px;
	position: relative;
	text-align: left;
	width: 700px;
	min-height: 100%;
	height: auto !important;
}
div#navigazione {padding-bottom: 40px}




	position: absolute; 
	bottom: 0 !important; 
	bottom: -1px; /* For Certain IE widths */ 
	height: 40px; 
	width: 100%;
}
	</style>
 
	</head>
	<body>
		<div id="container">
			<div id="navigazione">
				<div id="header">header<br /></div>
				<div id="left">left<br /></div>
				<div id="main">main<br /></div>
			</div>
			<div id="bottom">bottom<br /></div>
		</div>
	</body>
</html>
Ciao
Clepy

 Clepy
Funziona... Anche se hai leggermente modificato il codice html (no
problema amigo!!!).
Cerco di capire a fondo cosa hai fatto e ti faccio sapere...
Grazie mille.

Grazie mille.
Prego, sperando di non averti/mi incasinato:-)

 [cut]
M'ero sbagliato, il layout indicato da te è utile, ma non è quello
che cercavo. In realtà credo di essermi espresso male. Anche in un
altro forum mi hanno dato una soluzione graficamente simile alla tua
(anche se diversa tecnicamente).
Cerco di spiegarmi meglio:
Vorrei utilizzare XHTML 1.1 e CSS 2 e DIV, ma soprattutto vorrei
eliminare tutte le tabelle per ottenere un risultato graficamente
uguale a quello ottenibile con questo codice html:
<html>
   <head>
      <title>test<title>
   </head>
   <body>
      <table height="100%" width="700" border="0" cellpadding="0"
cellspacing="0" align="center">
         <tr height="50">
            <td colspan="2">
               <table height="100" width="100%" border="0"
bgcolor="#ff000ff">
                  <tr height="50">
                     <td>header</td>
                  </tr>
               </table>
            </td>
         </tr>
         <tr>
            <td width="100" valign="top">
               <table height="100" width="100%" border="0"
bgcolor="#ff0000">
                  <tr height="50">
                     <td>left</td>
                  </tr>
               </table>
            </td>
            <td valign="top">
               <table height="100" width="100%" border="0"
bgcolor="#00ff00">
                  <tr height="150">
                     <td>main</td>
                  </tr>
               </table>
            </td>
         </tr>
         <tr height="50">
            <td colspan="2">
               <table height="100" width="100%" border="0"
bgcolor="#0000ff">
                  <tr height="50">
                     <td>footer</td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </body>
</html>
Ciao e grazie.

uguale a quello ottenibile con questo codice html:
Mi dispiace ma non ho il tempo per stare a capire esattamente quello
che ti serve...a me pare che con il metodo che ti ho suggerito sia
possibile farlo senza problemi.
Ho notato che sei ancora quello del "test sui css" :-))
Ma questo layout ti serve davvero o stai tentando degli esperimenti
sulla preparazione del newsgroup? 
Ciao ciao
Clepy

 Clepy
Ancora grazie per l'interessamento
PS: Hai dei link da consigliarmi per lo studio dei layout tableless
(italiano o inglese non fa differenza)?
Ciao.

(italiano o inglese non fa differenza)?
Io ho trovato molto utile il libro di Luca Troiani
(
http://www.constile.org/css_guida_completa/index.html
), anche se a
volte mi č sembrato troppo integralista nella difesa a oltranza dei
layout table-less.
Vi trovi soluzioni pratiche spiegate perņ nei minimi dettagli...anche
nel sito ci sono utili tutorial.
Un purista del codice valido come te conoscerą senz'altro
www.alistapart.com
 :-))
Puoi trovare tantissimi altri link con google.
Ciao
Clepy

 Clepy
Ciao e grazie.

applicativi precedenti.
Allora non sono l'unico...:-)
il problema è che io tendo a farlo in ogni ambito. Esempio: ho
faticato il triplo alll'esame di matematica all'università perchè non
mi accontentavo delle soluzioni schematiche e per ogni argomenti mi
andavo a studiare i relativi teoremi..
Ma ultimamente  cerco di conteneremi:-)
Per quanto riguarda l'html e la programmazione ho avuto lo stesso
problema, che mi ha indotto a capire che di 
"fare siti" non mi fregava granchè... (chissà magari è la storia della
volpe e l'uva invece...)
Perché, per lavorare, oltre alla xhtml e css mi accorsi che dovevo
conoscere javascript, php e asp e, perchè no un'infarinatura di
actionscript, per non parlare della necessità di aggoirnamento
continuo e via dicendo...e affrontare tutto questo con il suddetto
metodo avrebbe comportato tempi lunghissimi e una formazione
sfiancante.
Mi resi conto allora che di queste cose mi interessava l'aspetto
prettamente teorico, mentre di fare siti per il cliente
scassaminchia/ignorante di turno non mi andava proprio..
Quello che mi affascina sono le potenzialità teoriche di questi
linguaggi,  ad esempio l'idea che un xml con annesso un dtd possa
permettere un flusso di informazione decodificabile pressochè
universalmente. 
Riuscire  a costruire un sistema efficiente e autono di gestione
dell'informazione dà una soddisfazione per certi versi simile alla
risoluzione di un difficile problema matematico, o la traduzione di
una versione di latino... mentre notare che al cliente più di tutto
esalta un babbo natale con le renne, svolazzante intorno al puntatore
del mouse fa solo cadere  le palle..
Per questo ora non faccio siti, studio solo quello che mi interessa e
vivo felice :-)))