Avoir un footer toujours en bas de page

Nombreux sont ceux qui se prennent la tête en positionnant leur footer. Selon la hauteur de votre page mais aussi de votre fenêtre votre footer ne se place pas toujours en bas de votre page.

Sachez qu'il existe une solution pour toujours placer votre footer en bas de page qui fonctionne très bien avec TOUS les navigateurs : CSS STICKY FOOTER

La structure HTML de base :

<div id=`wrap`>
    <div id=`header`>
    </div>

    <div id=`main` class=`clearfix`>
    </div>
</div>

<div id=`footer`>
</div>
</pre>
**Le style CSS à appliquer :**
<pre lang=`css`>html, body, #wrap {
    height: 100%;
}

body &gt; #wrap {
    height: auto;
    min-height: 100%;
}

#main {
    padding-bottom: 150px;  /* MÊME TAILLE QUE LA HAUTEUR DU FOOTER !! */
}

#footer {
    position: relative;
    margin-top: -150px; /* VALEUR NEGATIVE DE LA HAUTEUR DU FOOTER */
    height: 150px;
    clear:both;
}

Et voilà ce n'est pas plus compliqué que ça. Je vous invite à remplir votre page de contenu est de tester en redimensionnant votre page en hauteur vous verrez alors que votre footer sera toujours bien placé en bas de page... ET avec tous les navigateurs !