Espace indésirable entre les div

Bonsoir,

petit soucis d'espace entre mes background de contenu et de footer... Je précise que la colonne centrale ne va pas jusqu'au footer car elle a moins de contenu que la colonne de gauche, mais sinon y'a le même espace indésirable avant le footer.
J'ai cherché sur le forum, j'ai trouvé au sujet d'images ou de la balise dl mais là je ne vois pas de quoi ça pourrait venir...
Sauriez-vous me dire de quoi ça vient ?

N'hésitez pas à me communiquer des tutos à ce sujet, je sens que je vais souvent rencontrer ce genre de soucis.

Voici le site : http://www.dreamalys.com/design/purificateurs/

Voici mon code CSS :

#contenu {
overflow: hidden;
position: relative;
}

#centre {
float: right;
width: 775px;
background: url("../images/bg_centre.jpg") repeat-y;
/* top right bottom left */
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
}

#centre h1 {
width: 755px;
height: 35px;
line-height: 35px;
font-size: 12pt;
text-indent: 30px;
text-decoration: none;
color: #FFFFFF;
background: url("../images/contenu_titre.jpg") no-repeat;
/* top right bottom left */
margin: 0 10px 0px 10px;
}

#centre .bloc {
width: 753px;
background-color: #FFFFFF;
border-right: #a1d144 1px solid;
border-left: #a1d144 1px solid;
border-bottom: #a1d144 1px solid;
text-align: justify;
font-size: 10pt;
text-indent: 0;
/* top right bottom left */
margin: 0 10px 20px 10px;
}

#centre .bloc p {
width: 705px;
/* top right bottom left */
margin: 0px 25px 0px 25px;
padding: 50px 0 50px 0;
text-indent: 10px;
}

#menu {
height: 100%;
float: left;
width: 215px;
background: url("../images/bg_menu.jpg") repeat-y;
/* top right bottom left */
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
}

#menu h1 {
width: 195px;
height: 35px;
line-height: 35px;
font-size: 12pt;
text-align: center;;
text-decoration: none;
color: #FFFFFF;
background: url("../images/menu_titre.jpg") no-repeat;
/* top right bottom left */
margin: 0 10px 0px 10px;
}

#menu .bloc {
width: 193px;
background-color: #FFFFFF;
border-right: #a1d144 1px solid;
border-left: #a1d144 1px solid;
border-bottom: #a1d144 1px solid;
/* top right bottom left */
margin: 0 10px 20px 10px;
}

#menu .bloc dl {
margin: 0;
padding: 10px 0 10px 0;
}

#menu .bloc dd {
width: 195px;
height: 18px;
font-size: 10pt;
text-align: left;
text-indent: 30px;
margin: 0;
}

.clear {
clear: both;
}

#footer {
width: 990px;
height: 31px;
text-align: right;
font-size: 11px;
line-height: 15pt;
color: #a1d144;
background: url("../images/footer.jpg") no-repeat;
}

Merci pour votre aide !!!

Bonjour,

Ajoute un margin:0; à #footer p cela devrait règler le problème.

Pour que le fond des deux colonnes atteigne le footer, je te conseille les colonnes factices (mettre une seule image de fond à #contenu)

Voilà des solutions comme je les aime ! D'une simplicité enfantine et ça marche nickel !!! Un grand merci !

Je n'avais pas parlé du problème des 2 colonnes qui n'atteignaient pas le footer mais c'est aussi un problème que je n'arrivais pas à résoudre. J'avais essayé tout un tas de solutions mais aucune n'avait été concluante. Mais ça c'est vraiment la solution idéale ! Comment n'y ai-je pas pensé ?

Merci beaucoup !