View Full Version : Footer alignment

02-07-2012, 12:18 AM
Hi guys I've been searching and trying various ways (including sticky footer) but so far I've been unable to get the footer to stay at the bottom of the wrapper centered properly. It would neither be centered ok on small page but when it came to a big page with lots of info it would not stay aligned in the center on the bottom of wrapper properly.

Any ideas?


body {
font: normal 16px/18px helvetica,arial,sans-serif;
color: #555;
margin: 0;
padding: 0;
background: url(images/bg.jpg) repeat;
height: 100%

div#wrapper {
width: 1000px;
margin: 0 auto;
background: #fff;
overflow: hidden;
height: auto;
min-height: 100%;

div#footer {
text-align: center;
float: center;
bottom: 0;


html structure
<!doctype html>

<link href="ie.css" media="screen" rel="stylesheet" type="text/css">

<link href="default.css" media="screen" rel="stylesheet" type="text/css">

<link href="style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8">


<span id="siteName"><a href="./"><span></span></a></span>
<span id="siteTagline"></span>
<center><img src="" alt="" height="80" width="500"><center>
<!-- / header -->

<!-- begin nav -->
<div id="nav">
<div class="art-bar art-nav">
<div id="navigation" class="menu-menu-container">
Nav ul listing etc
<!-- end nav -->

<!-- Content -->
<section id="pageContent">

<!-- footer -->
<div id="footer">



02-07-2012, 12:29 AM
It's impossible to say without HTML, but I'm already seeing three mistakes: float:center, bottom:0 without position:absolute and min-height:100% while the parent element does not have the same declaration. Better have a look at the second and third tutorials I wrote for the intermediate students, on my signature page.