Problème de div height : auto;

Ce sujet est résolu
Default
,

Bonjour à tous

J'ai un problème que j'ai du mal à comprendre avec mon code CSS;

Je vais essayer d'être clair :

Voici le CSS de ma div principale :

.corps_site{

margin:auto;

width:960px;

height:auto;

margin-top:20px;

padding-bottom:20px;

border:1px solid black;

}

Comme vous pouvez le voir la hauteur est en auto car j'ai plusieurs éléments à rajouter dans le corps du site, dont un module de commentaires facebook, donc, à moins que quelqu'un ne me corrige là dessus, je suis obligé de mettre cette div "corps_site" en auto.

De plus j'ai un footer qui a ce code :

#footer{

height:248px;

width:100%;

bottom:0px;

background:#000 url(../pics/bg_footer.jpg) repeat-x top left;

margin-top:60px;

color:#000;

}

Voici le problème :

la div "corps_site" fonctionne mal en valeur "heigt:auto".

En gros elle n'englobe pas tous les éléments du corps du site et s'arrête grossomodo à 200px de hauteur. Tous les éléments "sortent" donc de cette div et le plus grave étant que du coup mon footer ne se trouve plus du tout à sa place mais au centre de la page.

Voilà un screen réalisé pour mieux comprendre

(j'ai fait exprès de mettre une bordure à la div "corps_site" afin qu'on puisse voir comment elle réagit.

le screenshot

Le grand cadre dégradé noir est le footer qui se retrouve à cette endroit de la page.

Merci d'avance à ceux ou celles qui pourront m'aider.

4 Réponse

Default
,

Juste avant la fermeture de la div.corps_site, rajoute une div avec une class "clear".

Puis dans ton css tu met:

div.clear{clear:both;}

Lorsque tu as un élément en float à l'intérieur d'un autre, il n'est pas pris en compte comme un contenu solid et donc n'intervient pas sur les dimensions de ce dernier. Mettre une div avec un clear permet créer un contenu solide après les éléments en float, ce qui va donc obliger le conteneur à prendre la bonne taille.

Default
,

Super merci beaucoup pour ton aide ça marche niquel!!!!

Tu viens de m'apprendre quelque chose.

Merci encore.

Default
,

Est-ce que tu as des éléments en float?

Default
,

Oui en effet j'ai des éléments en float Left et Right.

On peut les voir sur l'image : ce sont la div contenant l'image à gauche (qui est un slider) et la petite div avec une bordure noire à droite.

Voici le screenshot