HTML Forum

**CrazeDizzleD** · 03:49 PM

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

Code:

/* 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

Code:

<!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:

<huge image removed so we can read the posts>
Let me know if you see anything out of place. I need this done ASAP.

**chrishirst** · 12-22-2008, 06:19 AM

http://www.candsdesign.co.uk/article...sticky-footer/
http://ryanfait.com/sticky-footer/
http://www.themaninblue.com/writing/...ve/2005/08/29/

**CrazeDizzleD** · 12-22-2008, 07:20 AM

I don't want to do it with Javascript just to ensure compatibility.

I've tried the other two methods you posted and neither work for me.

Can you give me an example using the code I posted?

**chrishirst** · 12-22-2008, 08:19 AM

Then just let the footer take it's natural position.

Which, in my code it will do if javascript is disabled.

**CrazeDizzleD** · 12-22-2008, 09:38 AM

Its natural position is half way up the page, which looks horrible.

**Brian07002** · 12-22-2008, 09:44 AM

Plant both feet firmly on footer, and wait awhile...I've tried this, and it's proven to work better than super glue (aka coding)

**LadynRed** · 12-22-2008, 09:56 AM

Looks to me like your floats are not properly cleared, causing that big gap between the red area at the top and the bottom of the page.

**CrazeDizzleD** · 12-22-2008, 10:28 AM

Quote:

Originally Posted by LadynRed

Looks to me like your floats are not properly cleared, causing that big gap between the red area at the top and the bottom of the page.

If you notice on the right, I'm scrolled down a little. On that screenshot, while scrolled all the way up, the footer rests on the bottom of the page like it should. However when the content stretches like it is there, it doesn't go with it, just stays in the same place.

**LadynRed** · 10:45 AM

Try getting rid of the clearing divs and try putting overflow: auto on #container (to clear the floats). You also must remove the position:absolute on the footer, add margin: 0 auto (to center it) AND you must make sure that #footer follows the closing </div> for #container.

One other thing - IE6 doesn't support min/max width or height, so you're going to have to add a height: 100% in a separate stylesheet called by conditional comments for IE6.

**CrazeDizzleD** · 10:25 PM

Thank you LadynRed, it works perfectly on Firefox now.

But on IE6, unless the content is stretched, the container stops about halfway up the page. I guess because like you said, IE doesn't understand min-height. So I tried this:

Code:

.container {
    margin:auto auto;
    width:979px;
    min-height:1000px;
    margin-left:71px;
    overflow:auto;
    }

* html .container { height:1000px; }

And now I have scrollbars on my IE.

EDIT: I tried overflow:none on IE and that works like it should, but then it doesn't on FF. I tried doing the * html .container {overflow:none;} but that doesn't work.

Any ideas? I'd like to use only one stylesheet if I can help it.

**serandfae** · 11:31 PM

Overflow:

Possible values

visible
Content is not clipped by the rectangle of the parent element.

hidden
Content is clipped by the rectangle of the parent element.

scroll
Content is clipped by the rectangle of the parent element but scroll bars are provided to enable viewing of content outside the clipped region.

auto
Depends on Web browser.

inherit
Use the same computed value as the parent element for this property.

Default value

visible

Source: http://xhtml.com/en/css/reference/ , which is an awesome quick reference.

Note that none is not a possible value.

IE doesn't understand diddly unless you force it. For the moment you'll have to be content with conditional comments for IE once you get it right for FF.

tim

**CyberWorldJobs** · 12-23-2008, 12:29 AM

thanks people had similar problem bfore i just changed the theme

**specialk** · 12-27-2008, 12:05 PM

Have you thought about using frames. This will force the footer to stay all the way at the bottom of the page, maybe not the best method but it will not move around on you.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!