Omdat je nog geen oplossing hebt, reageer ik toch maar.
Eerst 't slechte nieuws en dan 'n mogelijke oplossing.
Ik heb er nog 'ns 'n tijd naar gekeken, maar dat gaat heel erg veel tijd kosten, misschien wel 'n volle dag.
Onderstaande is niet rottig bedoeld, maar mogelijk heb je er iets aan om te verbeteren.
De code is heel onoverzichtelijk, omdat je op heel veel plaatsen 'n <br> hebt gebruikt in plaats van 'n <p>, en met heel korte regels werkt. Daardoor wordt de pagina met code heel onoverzichtelijk lang.
Je springt niet netjes in, zoals hieronder:
HTML:
<div>
<div>
<p></p>
</div>
</div>
Los daarvan gebruik je toch nog vrij veel divs. 'n Footer, snap ik. Maar wat doet 'n wrap-footer?
Dan staat er in je css bijvoorbeeld op allerlei plaatsen 'n hoogte, op veel meer plaatsen dan nodig is. Zoiets kan van alles verstoren. En ook je css is niet echt heel overzichtelijk. De volgorde loopt niet gelijk op met die van de html, heel veel lege regels waardoor 't ook weer onoverzichtelijk lang wordt.
Al die dingen bij elkaar maken 't heel onoverzichtelijk om aan te werken. En eigenlijk moet je ook beginnen met zo'n witte ondergrond tot aan de onderkant en 'n footer onderaan, en pas daarna de details gaan invullen.
Nogmaals: niet bedoeld om te katten, maar om uit te leggen waarom het - in ieder geval voor mij - heel veel tijd zou gaan kosten.
Nu het (hopelijk) goede deel. Ik heb 'n lay-out in elkaar gestampt, die mogelijk bruikbaar is voor jou. Alleen moet je 'm zelf invullen.
Je vraagt in feite twee verschillende dingen: de witte ondergrond moet tot aan de footer lopen, en de footer moet altijd onderaan het scherm staan.
In deze lay-out is dat zo. En als er meer inhoud is dan op het scherm past, schuift de footer omlaag. Dus hij komt nooit over de tekst en zo te staan.
De kolommen links en rechts heb ik even 'n grijze achtergrond gegeven.
De bedoeling is dat je in bijvoorbeeld #links stap-voor-stap jouw dingen gaat zetten. En de breedte aanpast aan wat jij wilt en zo. En dan bij elke stap controleren of 't goed gaat, echt voortdurend. In zoveel mogelijk browsers.
En dat dan herhalen voor de middelste kolom, rechts, header en footer.
#container is minimaal schermvullend. De footer wordt daaronderin geparkeerd, en staat dus altijd onderaan het scherm.
#container-binnen is nodig om te zorgen dat de footer nooit over de tekst en zo heen komt te staan. Daar is de overflow: hidden voor nodig, en de padding-bottom.
#links, #content en #rechts worden daarbinnen naar links gefloat. De breedte en padding en zo hiervan moet je natuurlijk aanpassen.
Voor Internet Explorer 6 is wat aparte code nodig. Die staat in een 'conditional comment', die alleen door IE 6 wordt gelezen.
Nou, hier komt de code. Succes!
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer altijd onderaan scherm of lager ('sticky footer') - voorbeeld</title>
<style type="text/css">
html {margin: 0; padding: 0; height: 100%;}
body {margin: 0; padding: 0; height: 100%; background: #ff9;}
#container {position: relative; width: 800px; min-height: 100%; margin: 0 auto; background: white;}
#container-binnen {padding-bottom: 10em; overflow: hidden;}
#header {height: 130px; background: blue; text-align: center;}
#links {float: left; width: 190px; background: #aaa;}
#content {float: left; width: 400px; padding: 0 10px;}
#rechts {float: left; width: 190px; background: #555;}
#footer {position: absolute; bottom: 0; width: 100%; height: 10em; background: #0ff; text-align: center;}
</style>
<!--[if IE 6]>
<style type="text/css">
#container {height: 100%;}
#content {padding-bottom: 10em;}
#footer {clear: both;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="container-binnen">
<div id="header">Header</div>
<div id="links">Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links<br />Links-laatst<br /></div>
<div id="content">Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content-laatst<br /></div>
<div id="rechts">Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts<br />Rechts-laatst</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Edit: dit kan ongetwijfeld nog wat efficiënter en zo, maar ik heb het even snel in elkaar getimmerd, en 't werkt in ieder geval.
