Positionner le footer en bas de page

**dolu02** · 10/03/2008, 15h50

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, 17h57

Bonjour,
une solution ici.

**dolu02** · 10/03/2008, 17h59

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, 11h55

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!

Positionner le footer en bas de page

Positionnement en CSS

Discussions similaires

Partager

Partager