- This topic is empty.
-
AuthorPosts
-
June 19, 2009 at 12:58 pm #25113blueturtleParticipant
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!
Here’s the CSS
Code: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;
}June 19, 2009 at 1:41 pm #59354apostropheParticipantI 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.Code:Then add these rules to the css
Code:html, body {
height:100%;
}
.container_12 {
background-color:transparent;
height:auto !important;
margin:0 auto -120px;
min-height:100%;
width:960px;
}
.push {
height:120px;
}June 19, 2009 at 2:03 pm #59357blueturtleParticipantHallelujia! Thanks you so much. I think when I tried this technique I had the push class in the wrong place.
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
June 19, 2009 at 2:13 pm #59358apostropheParticipantTake the very last div closing tag (the one just before </body>) and put it before <div class="footerwrapper">
June 19, 2009 at 2:22 pm #59360blueturtleParticipantThank you for responding! Of course I get the div tags messed up. Need to work on that.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.