I tried implementing CSS sticky footer after I had already built my site and it's not working properly, probably because of some pre-existing code that I haven't been able to pinpoint yet. It seems that the CSS for #content is not being rendered at all, no matter what I try to declare for it. The site is at iphonebuy-host1.gaiahost.net. JSfiddle for iphonebuy-host1.gaiahost.net/thanks.html: http://jsfiddle.net/TqCYh/1/
(The stackoverflow code insert widget isn't working properly right now, sorry for the ridiculous code pasted below!)
* {
border:0;
margin:0;
padding:0;
}
html, body {
height:100%;
}
/** body **/
body {
font-size:100%;
font-family:arial, sans-serif;
line-height:1.3em;
color:#666;
width:100%;
background-image:url(images/greystripe.png);
background-repeat:repeat;
}
/** link styles **/
a,
a:link,
a:active,
a:hover,
a:visited {
text-decoration:none;
outline:none;
}
a:link, a:visited {
color:#0071BC;
}
a:hover, a:active {
color:#99CCCC;
}
/** text heading styles **/
h1 {
font:1.5em arial, sans-serif;
color:#A09F9F;
margin:1.2em 0 0 .7em;
}
h2 {
font:1.5em arial, sans-serif;
color:#95DF00;
margin-bottom:.5em;
}
h3 {
font:1.5em "arial black", sans-serif;
color:#95DF00;
padding-bottom:.5em;
}
h4 {
font:bold 1.313em arial, sans-serif;
color:#666;
}
h5 {
font:1em "arial black", sans-serif;
color:#95DF00;
margin:0;
padding:0;
}
/** for paragraph text **/
p {
font:1em arial, sans-serif;
line-height:1.3em;
text-align:justify;
color:#A09F9F;
margin-bottom:.5em;
padding:0;
}
/** main (container for everything) **/
#main {
background:#FFF;
width:62em;
min-height:100%;
text-align:left;
margin:0 auto;
padding:0.5em 1em 3em 1em;
-moz-box-shadow:0 0 8px 2px #ccc;
-webkit-box-shadow:0 0 8px 2px #ccc;
box-shadow:0 0 8px 2px #ccc;
behavior:url(/pie/PIE.htc);
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content: "\00A0";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/** header **/
#header {
height:5.5em;
margin:0 0 0 1em;
}
#logo {
margin-left:-.7em;
border:0;
}
/** top & bottom navigation menus **/
.topnav {
list-style:none;
font:1.313em arial, sans-serif;
color:#0071BC;
margin:-1.8em 0 1.2em 25em;
text-align:center;
}
.topnav li {
position:relative;
display:inline;
padding:0 .5em;
border:none;
}
.topnav a, .bottom-nav a {
display:inline-block;
}
.bottom-nav {
float:left;
list-style:none;
font:1em arial, sans-serif;
padding-top:1em;
}
.bottom-nav li {
display:inline;
padding:0 .5em;
margin-top:-2em;
}
/** container for content between header and footer **/
#content {
min-height:100%;
overflow:auto;
padding-bottom:30px;
}
/** footer **/
#footer {
margin-top:-30px;
padding:0 1em;
width:62em;
height:30px;
color:#999;
position:relative;
clear:both;
}
/** Opera Fix for sticky footer **/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
.paypal {
display:block;
margin:-2em 3em 0 19em;
padding-top:2em;
}
.copyright {
margin:-3em 0 0 38.7em;
font-size:.9em;
color:#999;
}
/** for horizontal line under header and above footer **/
hr.styled {
border:0;
height:0;
width:60em;
border-bottom:1px solid #E6E6E6;
}
hr.footer {
border:0;
height:0;
width:60em;
border-bottom:1px solid #E6E6E6;
margin-bottom:1em;
}
/** for vertical lines between menu items and 3 steps **/
.vertical-line {
border-right:1px solid #E6E6E6;
padding:0 1.5em 0 0;
}
/** thank you page **/
#thanks {
}
#thanks h1, #thanks p {
margin:1.5em;
text-align:center;
}
I usually use the technique from Ryan Fait as described here http://ryanfait.com/sticky-footer/
To apply this to your code you would have to do the following: - move the footer out of your main div, and place it directly in the body. You can only have two wrappers in the body, your main content container and the footer. - add an extra empty div at the bottom of your main div, and give it an ID like footer-push - add the following to your css:
#main {
min-height: 100%;
height: auto !important;
height: 100%;
padding: 0;
margin: 0 auto -100px;
}
#footer, #footer-push {
height: 100px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
That should do the trick. See for yourself: http://jsfiddle.net/TqCYh/3/
I know this technique requires you to add an empty div, which could be considered 'dirty' because you are adding markup that is exclusivly there for styling purpose, but the technique is simple and works great cross browser (IE7+). Having to add special code for IE or Opera or whatever is also dirty imo.
Anyways, this technique works great for me, I use it all the time. Hope it suits your need.