Discussion :

[Arkoze]

Bonjour,

J'ai un pti problème à l'affichage de ma page. Je m'explique, j'ai une page comme ceci

Ma page html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="content">
       <div id="colonne_gauche"></div>
       <div id="colonne_droite"></div>
       <div id="footer"></div>
</div>

Ma page css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
#conteneur{
    width: 980px;
    margin: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 15px;
    text-align: justify;
}
 
 
#colonne_gauche {
    width: 475px;
    float: left;
    padding-right: 15px;
 
}
 
#colonne_droite {
    width: 474px;
    float: right;
    padding-left: 15px;
}
 
 
#footer {
 
    font-size: 11px;
    text-align: right;
    background: url("../images/fond_gris_footer.jpg") repeat-x  ;
}

Le problème est que mon footer ne veut pas s'afficher tout en bas de la page.

J'ai une autre page ou la div (content) n'est pas séparé en 2 comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="content">
       <div id="footer"></div>
</div>

Et là mon footer s'affiche bien comme je le désire, c'est à dire en bas de page.

Merci d'avance pour votre aide.

[ornitho13]

Salut,

il faut commencer par corriger ton HTML car il manque des balises de fermetures :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="content">
       <div id="colonne_gauche"></div>
       <div id="colonne_droite"></div>
       <div id="footer"></div>
</div>

[Arkoze]

Ah oui au temps pour moi, j'ai juste fait une faute de frappe sur le forum mais sinon elles sont bien fermées dans mon code

[ornitho13]

dans ton css pour le footer ajoute ceci:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#footer {
	clear:both;
    font-size: 11px;
    text-align: right;
    background: url("../images/fond_gris_footer.jpg") repeat-x  ;
}

[Arkoze]

Ahhhh nickel !!! ça fonctionne !!! Merci !!!!

A quoi sert ce clear:both au juste ?

[ornitho13]

en fait, il sert à "interrompre" le float, cela définit si un élément doit se trouver sur la même bande horizontale qu’un élément flottant ou non (en résumé).

Dans ton cas quand tu utilises le float: left et le float:right, tes div sont flottantes et si tu ne rajoutes pas le clear, la div qui suit le flottant se retrouvera sur le même plan que ton flottant (comme si tes div flottant n'avait pas de hauteur en quelque sorte).

clear:left contrecarre le float:left;
clear:right contrecarre le float:right;
clear:both contrecarre les 2