Positionner le footer en bas de page [Résolu]

dolu02 · 10/03/2008, 14h50

Bonjour à tous!

J'essaie de positionner mon footer en bas de page, même si le contenu s'arrête plus haut.

Si le contenu est plus long le footer se positionne automatiquement en bas, mais quand ce n'est pas le cas, mon footer remonte au milieu de la page, à la fin du contenu.

Comment le faire coller en bas de page?

Ma page :

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
<body>
<div id="pagewidth" >
	<div id="header"><?php include 'include/header.inc.php'; ?></div>
	<div id="menu"><?php include 'include/menu.inc.php'; ?></div>
 
			<div id="wrapper" class="clearfix" > 
		<div id="twocols" class="clearfix"> 
			<div id="maincol" ><?php include 'include/shownews.inc.php'; ?></div>
			<div id="rightcol" ><div><?php //include 'include/mlbrss.inc.php'; ?></div></div>
		</div> 
		<div id="leftcol" ><?php include 'include/login.inc.php'; ?></div>
</div>
	<div id="footer" ><?php include 'include/footer.inc.php'; ?></div>
 
</div>
</body>
</html>

Mon 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
/* generated by csscreator.com */ 
html, body {margin:0;padding:0;text-align:center;background-color:#AAAAAA;} 
#pagewidth {width:980px;text-align:left;margin-left:auto;margin-right:auto;min-height:100%;background-color:#FFFFFF;} 
#header {position:relative;height:110px;background-color:#FFFFFF;width:100%;}
#menu {margin-bottom:100px;}
#leftcol {width:15%;float:left;position:relative;background-color:#99FF66;}
#twocols {width:85%;float:right;position:relative;}
#rightcol {width:18%;float:right;position:relative;background-color:#99FF99;}
#maincol {background-color:#FFFFFF;float:left;display:inline;position:relative;width:82%;}
#footer {height:40px;background-color:#FFFFCC;clear:both;text-align:center;} 
 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Erwan31 · 10/03/2008, 16h57

Bonjour,
une solution ici.

dolu02 · 10/03/2008, 16h59

Oui, j'ai déjà regardé ça, mais ça ne fonctionne pas.

J'ajoute que j'ai déjà regardé plusieurs sujets dans ce forum comme ici : http://www.developpez.net/forums/sho...d.php?t=260971

dolu02 · 11/03/2008, 10h55

J'ai trouvé une solution.

Il reste juste un problème avec IE si je mets le footer en dehors du container...

Ca fonctionne avec le lien que tu m'as donné, merci!

10/03/2008, 16h57	#2
Erwan31 Membre Expert Inscription : février 2008 Messages : 2 118 Détails du profil Informations forums : Inscription : février 2008 Messages : 2 118 Points : 2 051 Points : 2 051	Bonjour, une solution ici. Dernière modification par Deepin ; 09/06/2011 à 07h31.
	00

10/03/2008, 16h59	#3
dolu02 Membre régulier Inscription : mars 2007 Messages : 110 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : mars 2007 Messages : 110 Points : 88 Points : 88	Oui, j'ai déjà regardé ça, mais ça ne fonctionne pas. J'ajoute que j'ai déjà regardé plusieurs sujets dans ce forum comme ici : http://www.developpez.net/forums/sho...d.php?t=260971
	00

11/03/2008, 10h55	#4
dolu02 Membre régulier Inscription : mars 2007 Messages : 110 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : mars 2007 Messages : 110 Points : 88 Points : 88	J'ai trouvé une solution. Il reste juste un problème avec IE si je mets le footer en dehors du container... Ca fonctionne avec le lien que tu m'as donné, merci!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email