Ciao a tutti,
ho bisogno di posizionare un layout, centrato orizzontalmente nella pagina, come segue:

- top: altezza fissa di 70px e posizionato sempre in alto
- content: altezza fissa di 482px, deve essere sempre centrato verticalmente nella pagina, a qualsiasi risoluzione. Se la risoluzione dell'utente è inferiore alla somma della sua altezza e quella del top deve agganciarsi sotto al top e non scomparire in alto.
- footer: altezza fissa di 40px e posizionato sempre al bottom della pagina, a qualsiasi risoluzione. Se però la risoluzione è inferiore alla somma della sua altezza, dell'altezza del content e dell'altezza del top, deve agganciarsi sotto al content.

Finora ho buttato giù il seguente codice, che però mi fa scomparire il content in alto se la risoluzione è minore e il footer rimane sempre bottom, invece di agganciarsi al content.

Sto sbattendo la testa da ore!! Aiutatemi vi prego...grazie!!



CODICE HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"></div>
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>


CSS

html, body {
width: 100%;
height: 100%;
}
div#top {
margin: 0 auto;
width: 950px;
height: 70px;
overflow: hidden;
}
div#container {
clear: both;
margin: 0 auto;
width: 950px;
overflow: hidden;
}
div#content {
position: absolute;
top: 50%;
margin-top: -241px;
width: 950px;
height: 482px;
}
div#footer {
position: absolute;
bottom: 5px;
width: 950px;
height: 40px;
}