5

Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the dead space should be filled up with a div. I think the CSS Sticky Footer does this, but I cant get the "push div" to work push the content all the way down. As you can see my code isn't just body-wrapper-footer.

<body>
  <div id="banner-bg">
    <div id="wrapper">
      <div id="header-bg">
        <!-- header stuff -->
      </div> <!-- end header-bg -->
      <div id="content-bg">
        <div id="content">
          <!-- content stuff -->
        </div> <!-- end content -->
      </div> <!-- end content-bg -->
    </div> <!-- end wrapper -->
  </div> <!-- end banner-bg -->
</body>

body { 
    color:              #00FFFF;
    background-image:   url("Images/img.gif");
    font-size:          1em;
    font-weight:        normal;
    font-family:        verdana;
    text-align:         center;
    padding:            0;
    margin:             0;
}

#banner-bg {
    width:              100%;
    height:             9em;
    background-image:   url("Images/img2.gif"); background-repeat: repeat-x;
    position: absolute; top: 0;
}

#wrapper {
    width:              84em;
    margin-left:        auto; 
    margin-right:       auto;
}

#header-bg {
    height:             16em;
    background-image:   url("Images/header/header-bg.png"); 
}

#content-bg {
    background-image:   url("Images/img3.png"); background-repeat: repeat-y;
}

#content {
    margin-right:       2em; 
    margin-left:        2em;
}

Im confused about where the CSS Sticky Footer-code should go in my case.

Edit, heres what I got and what I want to do: alt text http://bayimg.com/image/gacniaacf.jpg

mdc
  • 1,161
  • 6
  • 22
  • 37
  • CSS Sticky Footer doesn't work for me in either FF3 or IE8. Perhaps that's part of the problem. – Eric Jul 11 '09 at 10:56
  • I've updated my answer to include actual code sample for your layout. Works fine for me in IE8 and FF2.5 – ChssPly76 Jul 12 '09 at 04:48

5 Answers5

5

Your HTML is a tad strange. For example, why does banner-bg wrap around everything?

That said, in order to use Sticky Footer technique you need to wrap everything but the footer into a single DIV. So your <body> tag would only contain two top DIVs - wrapper and footer. All the stuff you currently have would go inside that wrapper DIV.

Note that Sticky Footer may not work for you if background images you're using include transparent areas as it relies on wrapper background being covered by the header.

Update: Ok, here's the version that works. "Sticky Footer" style sheet is taken from cssstickyfooter.com and should work in all modern browsers. I've streamlined your HTML a bit (there's no need for separate background layers based on your picture) but you can modify it as you like so long as you keep the basic structure in place. Also, since I don't have your images I've added solid background colors for illustration purposes, you'll need to remove them.

<html>
<head>
 <style>
* {margin: 0; padding: 0} 
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px}  /* must be same height as the footer */
#footer {position: relative;
  margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0;   clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */ 

/* Do not touch styles above - see http://www.cssstickyfooter.com */

body {
  background-image: url("Images/img.gif");
  background: #99CCFF;
  color: #FFF;
  font-size: 13px;
  font-weight: normal;
  font-family: verdana;
  text-align: center;
  overflow: auto;
}

div#banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9em;
  background: url("Images/img2.gif") repeat-x;
  background: #000;
}

div#wrap {
  background: #666;
  width: 84em;
  margin-left: auto;
  margin-right: auto;
}

div#header {
  height: 16em;
  padding-top: 9em; /* banner height */
  background: url("Images/header/header-bg.png");
  background: #333; 
}

div#footer {
  background: #000;
  width: 84em;
  margin-left: auto;
  margin-right: auto;
}

 </style>
</head>
<body>
 <div id="banner">Banner</div>
 <div id="wrap">
    <div id="main" class="clearfix">
     <div id="header">Header</div> 
     <div id="content">
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content
   </div> <!-- end content -->
    </div> <!-- end main -->
 </div>
 <div id="footer">
  Footer
 </div>
</body>
</html>
ChssPly76
  • 99,456
  • 24
  • 206
  • 195
  • banner-bg needs to cover 100% of screen (width) and the rest of the site (inside the wrapper) should only cover a fixed width and be centered in the window. I couldnt think of any other way to do this. This is what I have and want: http://img43.imageshack.us/img43/5470/sitestructure.png – mdc Jul 11 '09 at 00:30
  • Thank you for the update, I will not be able to test this for a few days but I will write back when I did. If it works, you're the best :) – mdc Jul 12 '09 at 19:50
  • Sorry I didnt answer, I took a break from it all summer. I modified your code somewhat, and now it works - the div structure had to be made a bit ugly but it works. Thanks a million. – mdc Sep 06 '09 at 00:05
  • @mdc, how did you get it to work in the end? I'm looking for a solution to essentially the same problem as you. Would you care to share your solution? Or if it's easier, just the domain where I can see your website and take a look at your CSS myself. – ultrafez Oct 21 '11 at 00:02
1

Instead of modifying your existing styles (or using CSS Sticky Footer), its a lot easier for me to just redo it. So here goes:

<html>
<head>
<style type="text/css">
html, body {
    height: 100%;
}
#container {
    height: 100%;
    margin: 0 0 -200px 0;
    position: relative;
}
#footer {
    position: relative;
    height: 200px;  
}

</style>
</head>
<body>

<div id="container">
    <div id="header">Oh Beautiful Header</div>
    <div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>

Basically the negative margin should match the height of the footer, height 100% needs to be applied to html/body, and the position relative should be declared.

Also in reference to the xHTML, notice how the "footer" div is not INSIDE the "container" div, but rather, outside of it (so that there are 2 separate container-like divs, container and the footer).

If your still having trouble, the main problems with your markup IS:

  • 100% height needs to be declared for html and body tag.
  • negative margin is missing on the container div which is the #banner-bg
  • if footer is 100px tall, #banner-bg should have margin-bottom: -100px

  • position needs to be relative on both #banner-bg and the #footer

    html { height: 100%;}

    body { 
    color:                      #00FFFF;
    background-image:   url("Images/img.gif");
    font-size:                  1em;
    font-weight:        normal;
    font-family:        verdana;
    text-align:                 center;
    padding:                    0;
    margin:                     0;
    height: 100%;
}

#banner-bg {
    width:                      100%;
    height:                     100%;
    background-image:   url("Images/img2.gif"); background-repeat: repeat-x;
    position: relative;
    margin: 0 0 -200px 0;
}

#wrapper {
    width:                      84em;
    margin-left:        auto; 
    margin-right:       auto;
}

#header-bg {
    height:                     16em;
    background-image:   url("Images/header/header-bg.png"); 
}

#content-bg {
        background-image:       url("Images/img3.png"); background-repeat: repeat-y;
}

#content {
    margin-right:       2em; 
    margin-left:        2em;
}
#footer {
    position: relative;
    height: 200px;  
}

and the rest:

    <body>
          <div id="banner-bg">
            <div id="wrapper">
              <div id="header-bg">
                <!-- header stuff -->
              </div> <!-- end header-bg -->
              <div id="content-bg">
                <div id="content">
                  <!-- content stuff -->
                </div> <!-- end content -->
              </div> <!-- end content-bg -->
            </div> <!-- end wrapper -->
          </div> <!-- end banner-bg -->
          <div id="footer">
          Footer Content
          </div>
        </body>
</html>
Jarrett Barnett
  • 763
  • 3
  • 11
  • First of all, your code does not work (at a minimum, it's missing `height: 100%` declaration for `html`). Secondly, the original question included a link to a page describing exactly how to implement sticky footer - **mdc** is asking how to apply it to _his_ scenario. – ChssPly76 Jul 11 '09 at 00:08
  • Yes, thats right ChssPly76. I just added an image to illustrate what I have to work with. – mdc Jul 11 '09 at 00:33
  • ChssPly76, you are correct! I left out the html tag in the styles by accident (typed it in a hurry). Always good to ensure inherited styles apply! ALSO, I left out min-height (which is not recognized in IE6), but I would add it to ensure that the footer stays at the bottom regardless of little to no content. – Jarrett Barnett Jul 11 '09 at 01:02
  • I still cant get it to work, if I do as in your code the footer overlaps the wrapper div and its not at the bottom of the screen. I you guys look at my image I posted, is it possible to fill that empty space with a background image? Because if it isnt its not much use in trying to get the footer to stay at the bottom. – mdc Jul 11 '09 at 21:25
0

I'm not sure what Sticky Footer meant to do when the content is actually longer than your page height... If it should be floating over the text while you are scrolling then I would use Javascript to calculate the bottom coordinates and place the footer on a new layer in the fixed position. This could be made quite cross-browser friendly as well...

G Berdal
  • 1,134
  • 3
  • 14
  • 28
  • or do what facebook does with their status bar - it is fixed to the bottom of the screen, and that doesnt require javascript. – Chii Jul 15 '09 at 13:10
0

It's great to be able to implement the sticky footer using CSS and HTML alone, but I'm not a big fan of adjusting my markup / document structure for something cosmetic.

I much prefer a JavaScript approach, no graceful degradation. If no JS, no sticky footer. I typically use jQuery to implement:

jQuery

$(window).resize(function() {

    if ($('body').height() < $(window).height()) {
        $('#footer').addClass('fixed');
    }
    else {
        $('#footer').removeClass('fixed');
    }

}).resize();

CSS

#footer.fixed { position: fixed; bottom: 0; width: 100%; }
Phil LaNasa
  • 2,907
  • 1
  • 25
  • 16
0

here you can find some code as follows

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

In CSS:

height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

In HTML Body:

Your website content here.

  <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2013</p>
    </div>
Randhi Rupesh
  • 14,650
  • 9
  • 27
  • 46