Footer won't stay on bottom of page
I'm stuck and can't find a solution, so hopefully ya'll can help me out.
I can't get my footer to stay on the bottom of the page. Usually I don't have this problem, I dunno why I am now. I tried the absolute positioning with bottom:0; however that doesn't work. It works initially, but once the page stretches it doesn't go with it, just stays there.
style.css
/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
border: 0;
}
/* ============= */
html {
height:100%;
}
body {
background-color:#1c261b;
height:100%;
}
.bg {
background-image:url(images/bg.gif);
background-repeat:repeat-y;
margin:auto auto;
width:1120px;
min-height:100%;
}
.container {
margin:auto auto;
width:979px;
min-height:100%;
margin-left:71px;
}
.banner {
background:url(images/banner.gif) no-repeat;
width:979px;
height:180px;
margin:auto auto;
}
.footer {
background:url(images/footer.gif) no-repeat;
width:979px;
height:68px;
position:absolute;
bottom:0px;
}
.nav {
background:url(images/navbg.gif) repeat-x;
width:100%;
height:29px;
}
.clear { clear:left; }
.leftColumn {
width:298px;
float:left;
border:1px solid #000;
border-left:none;
}
.middleColumn {
width:379px;
float:left;
border:1px solid #000;
}
.rightColumn {
width:298px;
float:right;
border:1px solid #000;
border-right:none;
}
.leftColumnSmall {
width:228px;
float:left;
border:1px solid #000;
border-left:none;
}
.middleColumnSmall {
width:449px;
float:left;
border:1px solid #000;
}
.headerFeaturedMatch {
background:url(images/header_featuredmatch.gif) no-repeat;
width:298px;
height:23px;
}
.headerRecentNews {
background:url(images/header_recentnews.gif) no-repeat;
width:379px;
height:23px;
}
.headerFidelityTeams {
background:url(images/header_fidelityteams.gif) no-repeat;
width:298px;
height:23px;
}
.headerMatchResults {
background:url(images/header_matchresults.gif) no-repeat;
width:228px;
height:23px;
}
.headerRecentNewsLarge {
background:url(images/header_recentnews_large.gif) no-repeat;
width:449px;
height:23px;
}
.result {
background:url(images/_result.gif) no-repeat;
width:298px;
height:153px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.news {
background:url(images/_news.gif) no-repeat;
width:379px;
height:153px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.teams {
background:url(images/_teams.gif) no-repeat;
width:298px;
height:358px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.results {
background:url(images/_results.gif) no-repeat;
width:228px;
height:174px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.post {
background:url(images/_post.gif) no-repeat;
width:449px;
height:287px;
border-left:none;
border-right:none;
}index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo rootpath; ?>style.css" />
</head>
<body>
<div class="bg">
<div class="container">
<div class="banner"></div>
<div class="nav"></div>
<div class="leftColumn">
<div class="headerFeaturedMatch"></div>
<div class="result"></div>
</div>
<div class="middleColumn">
<div class="headerRecentNews"></div>
<div class="news"></div>
</div>
<div class="rightColumn">
<div class="headerFidelityTeams"></div>
<div class="teams"></div>
</div>
<div class="clear"></div>
<div class="leftColumnSmall">
<div class="headerMatchResults"></div>
<div class="results"></div>
</div>
<?php
include ($page.'.php');
?>
<div style="clear:both;"></div>
<div class="footer"></div>
</div>
</div>
</body>
</html>Please excuse the very messy CSS, I was just testing stuff that would normally be dynamic in my template and will later clean it up.
This is what happens when the page stretches:
Let me know if you see anything out of place. I need this done ASAP.
decibel.places posted this at 15:18 — 4th January 2009.
He has: 1,494 posts
Joined: Jun 2008
try changing the footer position from "absolute" to "relative"
.footer {background:url(images/footer.gif) no-repeat;
width:979px;
height:68px;
position:relative;
bottom:0px;
}
I am unfamiliar with the use of "echo rootpath" in the stylesheet path
<link rel="stylesheet" type="text/css" href="<?php echo rootpath; ?>style.css" />does the stylesheet load at all? It might if the php expression is null and the style.css file is in the same directory....
at the very least, it should be "echo $rootPath" (I think) check these results at php.net
how about
$_SERVER["SITE_HTMLROOT"]?why not put in the actual path to the stylesheet? does it change?
Megan posted this at 16:20 — 4th January 2009.
She has: 11,421 posts
Joined: Jun 1999
You want your footer frozen to the bottom of the page even when the page scrolls? Or you just want it at the bottom of your content?
If you want it frozen, try position:fixed. Putting those
<div style="clear:both">shoudln't be necessary - just putting clear:both in the footer styles would do the same thing.It's aways helpful to post a working link when you are asking about HTML or CSS problems. That way we can see what's happening on the site and use Firebug to try out solutions.
By the way, that footer should be an id not a class. It doesn't appear more than once, doe it? If it's a unique item it should be an id.
Megan
Connect with us on Facebook!
decibel.places posted this at 18:16 — 4th January 2009.
He has: 1,494 posts
Joined: Jun 2008
<div style="clear:both:">shoudln't be necessary - just putting clear:both in the footer styles would do the same thing.ah, I was unclear what you were saying because you didn't use the code tags.
you're correct, that empty div with the clear:both style is unnecessary.
[nb actual code is
<div style="clear:both;">with a semicolon, not<div style="clear:both:">]pr0gr4mm3r posted this at 16:28 — 4th January 2009.
He has: 1,502 posts
Joined: Sep 2006
It could be a constant the OP defined.
decibel.places posted this at 18:11 — 4th January 2009.
He has: 1,494 posts
Joined: Jun 2008
It could be a constant the OP defined.
yes, but probably needs to be a variable formed with "$" eg $rootpath
pr0gr4mm3r posted this at 21:59 — 4th January 2009.
He has: 1,502 posts
Joined: Sep 2006
Not if it's a constant.
decibel.places posted this at 22:42 — 4th January 2009.
He has: 1,494 posts
Joined: Jun 2008
how true
but I do not see any advantage in using a constant (which I suspect has not been set - so the path would default to the doc's dir and the given filename) as the path to the stylesheet
OP has stated elsewhere they have beginner's skills, so they may not even understand using a constant..
pr0gr4mm3r posted this at 23:53 — 4th January 2009.
He has: 1,502 posts
Joined: Sep 2006
I'm not sure what the advantages are, but some frameworks define the base path that way.
I know this wasn't part of the original question, but I saw a critical security problem with this line:
include ($page.'.php');I can set $page to be something like "http://example.com/evilscript" which would cause your site to run the script located at "http://example.com/evilscript.php". This can easily get your site hacked.
webwiz posted this at 19:10 — 5th January 2009.
He has: 629 posts
Joined: May 2007
WRT the original question, it looks like you are trying to implement FooterStickAlt. If so, be aware that it only works when you have a single DIV to wrap the non-footer content. You have
<div class="bg">and<div class="container">wrapping your content. This does not work.Theoretically you should be able to do this by using CSS display properties of table, table-row, and table-cell. As you probably know, the World's Favorite Browser will not support these until version 8 comes out.
You may be able to take out one of those DIVs. Check the FooterStickAlt link I gave above for details.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.