Forums

mintertweed

I am using a sticky footer method and it works just fine on my front page, but not so much on any of the other pages. Other than the front page, the only other page I have a design for at the moment is my contact page. It is all using the same stylesheet, so I am rather clueless as to why it is not working. The method I am using, uses this code for the main-column:

#main-column {
    padding-bottom: 70px; /* Must be same height as the footer. */
}

And this code for the footer:

#footer {
    margin-top: -70px; /* Negative value of footer height. */
    height: 70px;
}

What am I missing? I am sure it is something terribly simple as usual. Thank you in advance!

Edit: I believe this is the site I originally got the concept from about a year ago.

noahgelman

There is more css in the example that you linked to than you have shown above. Do you have a link to the site?

mintertweed

I created anchor tags for the front and contact page, respectively, in my original post. But here is another link to my site.

JamesMD

Add this in your CSS:

footer {
    width:100%;
    position:absolute;
    bottom:0;
}

This will position your footer accordingly to the bottom of the page. Basically, "footer" is the wrapper, "#footer" is the inner content. (The div ID nested inside your "footer" element)

mintertweed

@JamesMD, I did what you suggested, but it broke my website a little bit. The footer is now floating over the content in the middle of the page. Hrm.

Senff

I can't really see where it went wrong originally because you gave the footer an absolute position, and like you said that's messing things up a bit.

Having a footer and then have a div id="footer" within it, is a bit silly IMO. I think you were fine with the original code, but you might want to check if #main-column is cleared? Use a clearfix on that one (try giving it overflow:hidden; and see if that works.

yeeyang

A little confused on what 'look' you're trying to go for but two things I could suggest.

If you're looking to make sure that the footer is always at the bottom of your page, then you already have the footer absolutely positioned to the bottom. Just need to give the footer a positioning context of it's parent. Add:

.page-wrap { position: relative }

You can take off the min-height as well from your .page-wrap as well and put a overflow:hidden; on your #main-column to allow your content to flow properly.

If you're looking for a real sticky footer, you can just do a position: fixed to your footer and put a background color on footer so content flows behind it. I would just remember to put some padding at the bottom of your .page-wrap so that your footer has a place to live.

Paulie_D

If you are using the Sticky Footer method I am thinking of then the footer element should be OUTSIDE of the #pagewrap. then it will naturally come after any other element and the 100% heights and margins/padding etc. will do the rest.

http://codepen.io/Paulie-D/pen/aFpCu

mintertweed

@Senff, I agree with you on your comment about there being a #footer, so I have removed #header and #footer, changing the CSS to reflect that. Then I applied overflow: hidden; to #main-column.

@yeeyang, I added position: relative; to the newly named #wrapper. I also removed min-height and @Senff already suggested the clearfix, so I have done that as well. Although it sounds tempting to have my content appear from behind the footer as you scroll down, I will consider this later, once I have figured out this little problem.

@Paulie_D, I have placed the footer outside of the wrapper. I also looked at your CodePen and made sure all the proper code was where it should be.

And with all of that said, the sticky footer is now below the content, but not at the bottom of the page. I have a very small monitor, so to test the footer, I have to hold Ctrl + scroll out with my middle mouse button, and the footer does not stay at the bottom of the page. It stays below the content, which is good, but it does not stay at the bottom if I push out. Thank you for all of your comments, but how do I achieve this effect?

ChrisP

@mintertweed

footer {
  position: absolute;
  margin-top: -70px;
  height: 70px;
  border-top: 5px solid #A11517;
  clear: both;
  width: 100%;
  bottom: 0;
}

Edit: I got rid of the margin: 0 auto; too, as it's not doing anything...

Senff

I believe that on the base level, the page should have TWO elements. One is the footer, and one is all the rest (let's just call it the "main block"). This main block needs to have a min-height of 100%, so that it pushes the footer all the way to the bottom of the screen.

However, you have a wrapper, and then three elements within that (including the footer, still!), so the basic structure won't work there.

Here's what I would suggest: first, move the footer OUT of the wrapper. I know you said you moved it out of it, but I still see it in there. Then, give the #wrapper auto-height and min-height of 100%, as well as a bottom padding of 70px. And a clearfix, too. Finally, give the footer a top-margin of -70px.

Paulie_D

With the method I gave there is NO requirement for positioning of any kind.

It's all handled by 100% heights / margins & padding.

mintertweed

@Paulie_D, I don't seem to understand how to use the method you gave. Sorry.

@ChrisP, okay, I modified the footer. I kept a width of 960px instead of 100% because I only want the footer to span 960px. With 100%, it spans the entire width of the page.

@Senff: I guess my "main block" would be the body. I gave the body a min-height of 100% and it seems to be keeping the footer at the bottom of the page, even when I scroll out.

Also, this is literally what my html-footer.php looks like:

  </div> <!-- end wrapper -->
  <?php wp_footer(); ?>
  </body>
</html>

So, the footer is most definitely out of the #wrapper, but it is still inside the body. Should it also be outside of the body as well? I gave a height of auto, min-height: 100%, and padding-bottom: 70px; to #wrapper. My footer already had a top-margin of -70px.

Okay, so now all I need to do is center the footer. I thought giving it margin: 0 auto; would do it, but no such luck. So, that is all I need help with now. @Senff, tell me if you still see the footer in the #wrapper!

Edit: Sigh. I did not think this would be such a task.

Paulie_D

On your front page the footer still has position:absolute applied.

Take that off and it will center.

On your contact page the footer is still in the wrapper.

Senff

I still see the footer within the wrapper. You'll need to move it out of there.

Also, you can't set the body as the "main block", because you'll need a footer at the SAME level as the main block. With the body as the main block, you'll always have the footer WITHIN it.

mintertweed

@Paulie_D, I removed position: absolute; and the footer neither centered nor is it sticking to the bottom of the page anymore. @Senff, is this because I have the body as the "main block?" So, basically, I need to take everything I modified on the body and place it on #wrapper?

Paulie_D

Well I did it in Chrome Developer tools and it did so that's where that came from.

To center it on your front page you need to add

  margin:0 auto;

As for the stickyness, then @Senff has covered that. The footer needs to be outside of the wrapper AFAIK.

mintertweed

And this is the code for a page:

<?php Starkers_Utilities::get_template_parts( array( 'parts/shared/html-header', 'parts/shared/header' ) ); ?>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php the_content(); ?> <?php comments_template( '', true ); ?> <?php endwhile; ?>

<?php Starkers_Utilities::get_template_parts( array( 'parts/shared/footer','parts/shared/html-footer' ) ); ?>

So, how do I make the footer no longer in the #wrapper? Thank you for all of your help thus far.

Edit #1: Hmm, the PHP didn't come out right once I posted it. Hopefully, you can still understand it.

Edit #2: Also, @Senff, check my front page. That is the one currently being edited. I have yet to change anything for page.php. Also, I am back where I started. The footer is centered and below the content, but it is no longer sticking to the bottom of the page when I scroll out. Grrsome.

ChrisP

@mintertweed, that bit of code to take your footer out of the wrapper should be located in footer.php

mintertweed

I am using the Starkers theme and they differentiate between the physical footer and the part of the footer that involves HTML. So, for footer.php, I have this:

  <footer>
    <div id="footer-inside">
      <p>Copyright &copy; <?php echo date("Y"); ?> <?php bloginfo( 'name' ); ?>. All rights reserved. <a href="http://www.mintertweed.com/feed/" target="_blank">Subscribe via RSS</a>. Designed by <a href="http://www.mintertweed.com/" target="_blank">Minter Tweed</a>.</p>
    </div> <!-- end footer-inside -->
  </footer>

And then for the html-footer.php, I have this:

  </div> <!-- end wrapper -->
  <?php wp_footer(); ?>
  </body>
</html>

Kind of weird and a bit unnecessary, but as you can see, the footer is placed after the end of #wrapper. This is why I can not figure out why it is appearing inside the #wrapper.

Edit: I am thoroughly confused and I am starting to get a headache. I do not see how I am supposed to fix this.

Eric

Here try mine. It doesn't get any easier http://www.visibilityinherit.com/code/css3-sticky-footer.php

mintertweed

I chose the first option because I still can not figure out how to get my footer out of the wrapper, even though I have my code set-up with the footer outside. But anywho, it works. But there is one little problem. I would like for my header to span the width of the page. Not just 960px. This is my current code for my #wrapper and footer:

#wrapper {
  width: 960px;
  /*width: 100%;*/
  min-height: 100%;
  position: relative;
  padding-bottom: 70px;
  clear: both;
  margin:0 auto;
}

footer {
  margin-top: -70px;
  height: 70px;
  border-top: 5px solid #A11517;
  clear: both;
  width: 960px;
  bottom: 0;
  /*margin: 0 auto;*/
  position: absolute;
}

I have width: 100%; commented out because if it were not, my footer would go to the left side. With it commented out, my footer stays centered. But let us assume I apply width: 100%; on #wrapper. That would mean that I would have to go to footer and comment out position: absolute; and apply margin: 0 auto; and we both know that if I do that, the footer is no longer sticky.

So, how do I fix this?

ChrisP

@mintertweed, you should make footer 100%, and style the border on footer-inside, and give that the width of 960px..that's what I would do

so...for example, pardon the nesting, but:

  footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    .footer-inside {
      max-width: 960px;
      width: 100%;
      margin: 0 auto;
      border-top: 5px solid red;
    }
  }

mintertweed

@Paulie_D, @Senff, @yeeyang, @JamesMD: I can't freakin' believe it. I actually figured it out. I created a blank PHP file called template.php and I was copying and pasting code from my WordPress PHP documents in the order that they execute. I then noticed that nothing was wrong with my code. This made me a little angry because something had to be wrong with my code, otherwise Firebug would not clearly be stating that the footer was inside the #wrapper. And then I noticed it!

  <?php Starkers_Utilities::get_template_parts( array( 'parts/shared/footer', 'parts/shared/html-footer') ); ?>

It is part of the Starkers theme that was doing it. There is a line of PHP code at the end of index.php that calls footer.php before html-footer.php. So, effectively, the code that contains the footer is called after the footer has already been established, which means it gets tossed into the #wrapper. So, I simply switched the order it was calling it in and voila! The footer is now outside of the #wrapper! I then went to @Eric's site and proceeded to use the code that explains how to make a sticky footer when the footer is outside of the #wrapper and everything is working now. Well, on the front page at least. But I know what to look for now. Sorry if I annoyed some of you with this. I knew I had programmed it correctly...it was the damn theme that got me.

ChrisP

@mintertweed, you'll have to change all templates if you'd like to go that route (single.php, page.php, archive.php, etc) I've never used Starkers, so I don't know how detailed their template system is out of the box.

mintertweed

@ChrisP, I like it because it is a completely nude theme, stripped of everything except for what makes WordPress tick. That way, I have total freedom over my design. Also, if I really wanted to, I could get rid of html-header.php and html-footer.php, combine them with their fellow PHP documents, and simply call the header and footer like they are normally called. That is the only weirdness I have noticed thus far.

ChrisP

@mintertweed, I completely understand, I use _S and Thematic for those same reasons. Complete control over design.

I recently started a project with the HTML5Boilerplate theme too, to try it out, as I like the HTML5BP as a starting point for static sites.

treehouse : what would you like to learn today?

Forums

[Solved] Sticky Footer Method