[Résolu] Footer sur toute la largeur de la page

Bien le bonjour

Voila j'ai fais une petite recherche et j'ai remarqué que les footers posait certains problèmes (pour les débutants), et donc je ne suis pas a exclure de cette catégorie car je vous le donne en mille "un problème de footer"

Je m'explique,
Je souhaiterais que ma page prenne cette forme:

--------------------------
                            <----- header
--------------------------
     |              |
     |              |
     |              |     <----- contener
     |              |
     |              |
--------------------------
--------------------------  <----- footer

Or celle-ci prend plutot cette forme:

--------------------------
                             <----- header
--------------------------
     |              |
     |              |
     |              |     <----- contener
     |              |
     |              |
     ----------------
     ----------------    <----- footer

J'ai essayer a coup de position: relative et absolute du z-index et changer le positionnement des div mais rien n'y fait et je sèche desormais.
Donc je m'en remet a vous.
Je vous met la feuille de style CSS largement inspiré de vos exemples d'ailleurs, merci.

html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #ffffff;
}
.header {
height: 120px;
background-color: #ffffff;
position: relative;
background-image: url(./img/bg.jpg)
}
.conteneur { left: 50%;
width: 800px;
margin-left: -400px;
height: 100%;
position: absolute;
background-color: #ffffff;
}
.footer {
height: 40px;
background-image: url(./img/footer.jpg)
}

J'ai bien compris que le footer était relatif à la largeur du conteneur c'est pourquoi je l'ai mis en dehors mais le problème persiste
Voila en ésperant que vous pourrez m'aider, je vous remercie d'avance.
Modifié par Bit Invader (18 Feb 2007 - 23:59)

Bonjour & bienvenue, Bit Invader.

Si ton pied de page se trouve en dehors du conteneur, il ne devrait pas y avoir de soucis ... Essaie avec ça :

<div id="header"><h1>Bannière du site</h1></div>
<div id="conteneur">
   <h2>Titre de la page</h2>
   <p>Contenu de la page ...</p>
</div>
<div id="footer">
    <p>Pied de page</p>
</div>

#header, #footer {
   background: #333;
   color: #fff;
}
#conteneur {
   width: 80%;
   margin: 0 auto;
}

Merci beaucoup Thomas D. pour ta réponse.
En effet le problème est desormais régler, non seulement cela mais je m'apercois aussi que mon code était bourré de chose inutiles pour ce que je voulais en faire. (surement cela qui me génait dans le résultat que je souhaitais obtenir)

En tout cas merci car desormais je ferais plus attention à la taille du code et à essayer d'obtenir quelque chose de plus simple.
Modifié par Bit Invader (18 Feb 2007 - 23:58)