Ciao a tutti!

Appena totrnato dalle ferie e già alle prese con un problemuccio css...

Il problema, come descritto nel titolo, è il seguente:

Struttura:

-container

---header

---content

---footer

-/containter

il mio obiettivo è di posizionare il footer in fondo alla pagina, e il content allineato verticalmente tra header e footer.

Riesco a fare entrambi, ma separatamente, o uno o l'altro...

vi posto il codice css:

codice:
body,html { 
	margin:0;
	height:100%;
}

#top {
	height:50px;
	border:#FF0000 1px solid;
}

#content {
	position:relative;
	top:50%;
	height:400px;
	width:200px;
	margin:-200px auto;
	padding: 0;
	border:1px solid red;
}

.box {
	height:300px;
	width:190px;
	background:#CCC;
}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
	padding:0;

}
.foot {
	height:20px;
	background:#333;
	padding:0;
}
#container {
	width:100%;
	height:100%;
	position:relative;
}
body>#container{
	height:auto;
	min-height:100%;
}
sicuramente è un po pasticciato perchè sto provando da ore alcune alternative... e in effetti è tanto pasticciato, però se lo testate funziona correttamente, solo che ridimensionando la pagina non si comporta molto bene... giudicate voi stessi!!

la struttura html:
codice:
</head>
<body>
<div id="container">
  <div id="top"> hearder
  </div>       
       <div id="content">
            <div class="box">box content
            </div>
      </div>
           <div id="footer">
        	<div class="foot">footer
            </div>
    </div>
    </div>

</body>
</html>
quello vorrei ottenere, è il normalissimo esempio di una tabella alta 100% suddivisa in tre righe, ( top - content - bottom ) dove al centro, in Valign, ci sono i contenuti.

Mentre il mio progetto si sovrappone tutto! un mega pasticcio proprio il primo giorno di lavoro!!! evvai!!!

grazie!

ciauz