I am currently working on a website and trying to figure out how to make the footer stick to the bottom of the screen. I attempted a solution from ryanfait but it didn't work with my theme. Another method I tried using absolute positioning placed the footer in the middle of long pages, which is not the desired outcome.
You can view my current site here: and see how the footer is not displaying correctly on the front page.
My site's HTML structure is as follows:
<body>
<div id="wrap">
<div id="header"></div
<div id="nav"></div>
<div id="inner"></div>
<div id="footer" class="footer"></div>
</div>
Here is the CSS code:
* {
margin: 0;
}
html {
margin: 0;
padding: 0;
height:100%;
}
body {
background: #000000 url(images/bg.jpg) top center no-repeat;
color: #444444;
font-size: 12px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
margin: 0 auto 0;
padding: 0;
line-height: 21px;
height:100%;
}
#wrap {
height:auto !important;
margin:0 auto;
min-height:100%;
padding:0;
position: relative; /* I tried this but it breaks long pages */
}
#inner {
background: #FFF;
width: 900px;
margin: 0 auto 0;
padding: 30px;
overflow: hidden;
}
#footer {
background: #161616;
color: #666666;
margin: 0 auto 0;
padding: 20px, 0, 0, 0;
clear: both;
overflow: hidden;
border-top: 1px solid #222222;
height: 40px;
bottom: 0;
left: 0;
width: 100%;
position: absolute; /* I tried this but it breaks long pages */
}
I'm looking for suggestions on how to achieve the sticky footer effect without using position: absolute. Any ideas?