In deze tutorial ga ik je uitleggen hoe je ervoor kan zorgen dan een footer
altijd onderaan de pagina komt te staan. ook als de inhoud van de pagina niet schermvullend is.

Hieronder een opzet van hoe de html er uit gaat zien:

<div id="page">
	<p>
	Hier de tekst van de linkse kolom
	</p>
	<div class="footer">
	Hier de footer tekst.
	</div>
</div>

Op deze manier maken we dus een container en een footer in de container.
Om te zorgen dat de footer nu altijd ondrein beeld staat gaan we css gebruiken.

Met behulp van de volgende regels css geven we aan dat het scherm altijd 100% hoog is:

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

Nu gaan we ervoor zorgen dat de container altijd minimaal 100% hoog is.
dit doen we op de volgende manier:

#page {width: 800px;
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}

Je zegt dus eigenlijk dat de hoogte van de container 100% is.

Nu gaan we de styles voor de footer koppelen. Deze worden als volgt:

.footer {position: absolute;  

bottom: 0; /* heel belangrijk */  

height: 20px;  

width: 100%;  

}

Op dit moment staat de footer altijd onderaan de pagina. ongeacht of er weinig of veel inhoud is.
Dit is getest en werkend bevonden op de volgende browsers:

• IE6
• IE7
• Firefox 2.0.11
• Safari