Forums

robertallen

Hi all,

I'm trying to get a CSS Sticky footer (cssstickyfooter.com) made, but I'm having problems with it.

It seems like it's halfway working, but the footer seems to be longer at the bottom and not actually sticking to the bottom.

http://www.pearsonresource.com/about-us/

Here's my CSS code... html, body { height: 100%; } #container { margin: auto; width: 960px;

            min-height: 100%;

}
#subcontainer {
                    overflow:auto;
                  padding-bottom: 97px;
}
#footer-5, #footer-7, #footer-9, #footer-11, #footer-13, #footer-15, #footer-17 {
  clear: both;
  position: relative;
  width: 100%;

              margin-top: -97px; /* negative value of footer height */
            height: 97px;
}

Pardon the amount of footers, they wanted a different color footer for each page. Also, pardon the tabs...I just wanted to tab the changes for the sticky footer parts in case I needed to take them out if they weren't working.

jurotek

Sticky Footer...

Use classes instead all those footer id's to change appearance of footer

hotpink

Edit: I understand what you mean now. The content in the footer extends the full width of the window, while the rest of the page is constrained to 960px.

This code should help.

  .footer_content {
  width: 960px;
  margin: 0 auto;
  }

robertallen

Hi Jurotek, good point on the footer id thing. I didn't think of that.

I adjusted my code to the sticky footer link, but I'm still seeing the problem show up. I am stumped completely.

robertallen

Thank you hotpink...I forgot to center (margin auto) the content inside the footer.

Much appreciated.

Still I can't figure out why it goes further down the page though. :(

jurotek

@robertallen, Here is another example of sticky footer...

robertallen

Yep, that's the one I was going off of actually.

There is something not right elsewhere.

Obviously I renamed #wrap to #container, #main to #subcontainer...I'm set in my ways there...but, the code is all right in the CSS...and yet, it's too far down the page.

I don't get it :(

Eric

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ - Does not inlude the fix for IE/Opera therefore does not work in all browsers. Uses min-height:100%; height:auto !important; height:100%; bit which brings about some bugs in different situations. Here is one of many threads where Paul O'B explains why http://www.sitepoint.com/forums/showthread.php?790129-help-with-sticky-footer-that-is-not-sticking-to-bottom. The footer is positioned outside the wrapper. The inluded demo is somewhat simple to learn from - albeit wrong.

Try your hand at mine. I also explain why all the others fail - or excell. http://www.visibilityinherit.com/code/css3-sticky-footer.php

jurotek

@robertallen, also if you'd change header top margin to header top padding it would help. With margin the container gets 30px taller and pushes footer down by that much, with padding it would not happen

BTW, just go with what @Eric has to offer, he got some good examples there

hotpink

As @jurotek pointed out, the use of a top margin on the header is causing the footer to be pushed down. A full rewrite would probably be a cleaner approach, however I think your current code can work.

Change from

  #header {
  margin-top: 30px;
  }

To

  #header {
  padding-top: 30px;
  }

Another source of extra spacing is the #footer { margin-top }

The footer height is set to 97px, however there is a 7px border applied to the top. So the computed height is 104px.

Change from

  #footer {
  ...
  margin-top: -97px;
  ...
  }

To

  #footer {
  ...
  margin-top: -104px;
  ...
  }

jurotek

@hotpink,

Another source of extra spacing is the #footer { margin-top }

good catch, I wasn't too thorough

treehouse : what would you like to learn today?

Forums

CSS Sticky Footer Problem