Hi. I have been going out of my mind trying to position a footer to the bottom of the page. I've tried all the techniques I could find online i.e. Ryan Fait's CSS sticky footer http://ryanfait.com/sticky-footer/, Matthew James Taylor's technique http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page and even this one http://www.cssstickyfooter.com/. I have tried to put the footer within the container and outside. Here is the test page http://blueturtlegraphics.info.s62344.gridserver.com/index.html. As you can see, there is a white gap underneath the footer. I am viewing in FF and Safari and it doesn't work in either.
Would love it if someone can point out what I am doing wrong. Thanks!
I just had a go with the Ryan Fait method in firebug and it worked without any problems. So in your markup add an empty div with a class (or id) of push just before the closing div of the main container.
Would love it if someone can point out what I am doing wrong. Thanks!
Here's the CSS
body {
background-image: url(images/body_bcknd.jpg);
background-repeat: repeat-x;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
}
h1 {
font-size: 24px;
color: #003C68;
letter-spacing: 0.75px;
}
h2 {
font-size: 20px;
color: #003C68;
font-variant: small-caps;
letter-spacing: 1.5px;
}
/*
960px grid system ~ Core CSS.
12 Columns ~ Margin left: 10px ~ Margin right: 10px
*/
@import 'reset.css';
/* =Containers
--------------------------------------------------------------------------------*/
.container_12
{
width: 960px;
background-color: transparent;
margin: 0 auto;
}
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_4, .grid_8, .grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}
.container_12 .grid_4 {width: 300px;}
.container_12 .grid_6 {width: 460px;}
.container_12 .grid_8 {width: 620px;}
.container_12 .grid_12 {width: 940px;}
/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_4 {padding-left: 320px;}
.container_12 .prefix_8 {padding-left: 640px;}
/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_4 {padding-right: 320px;}
.container_12 .suffix_8 {padding-right: 640px;}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
clear: both;
content:' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
.container_12 .grid_12 #header {
background-image: url(images/btg_header.jpg);
background-repeat: no-repeat;
height: 152px;
}
.container_12 .grid_12 #header #topnav {
width: 630px;
margin-top: 5px;
padding-top: 8px;
}
.container_12 .grid_12 #header #logo {
width: 220px;
padding-top: 25px;
}
.container_12 .grid_12 #intro {
margin: 30px 330px 30px 0;
clear: both;
position: absolute;
width: 600px;
}
#callout {
width: 295px;
float: right;
background-image: url(images/postit.jpg);
height: 250px;
background-repeat: no-repeat;
margin-top: 20px;
background-position: 15px 0;
}
#recentheader {
margin-bottom: 12px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #00AFDB;
padding-bottom: 5px;
}
#homebody {
width: 960px;
height: 175px;
margin: 22px 0 12px 0;
}
.footerwrapper {
background-image: url(images/footerbcknd.jpg);
background-repeat: repeat-x;
margin: 0 auto;
height: 120px;
}
.footer {
background-image: url(images/btg_footer.jpg);
background-repeat: no-repeat;
height: 120px;
width: 960px;
margin: 0 auto;
padding: 0 10px;
}
#footersocial {
float: right;
width: 460px;
padding-top: 20px;
}
#footeraddress {
width: 460px;
padding: 20px 0 0 10px;
margin-right: 500px;
}
So in your markup add an empty div with a class (or id) of push just before the closing div of the main container.
Then add these rules to the css
html, body {
height:100%;
}
.container_12 {
background-color:transparent;
height:auto !important;
margin:0 auto -120px;
min-height:100%;
width:960px;
}
.push {
height:120px;
}
Now, how do I get the footer to stretch across the width of the page. I have "footerwrapper" width set to 100%. Shouldn't that work?
http://blueturtlegraphics.info.s62344.gridserver.com/index.html