I've been building an artist website to promote my music and I've ran into an obstacle with my footer. What I want is very simple (or so it would seem). I'm trying to create a footer that sits under the content/body and is at the very bottom of the site. No white space on the left, right, or bottom. Then when the site has minimal content the footer will sit at the bottom of the screen. The problem that I'm running into is that when the content is more than a page long, instead of pushing the footer down with it, the footer just sits where the bottom of the screen is (when scrolled to the top). This means that when the user scrolls to the bottom of the site, the footer remains in the middle somewhere, overlapping content.

I wish I had kept track of all the sites and forums I've been on and tried, but It's been several full days of searching. It's better than when it started (originally I couldn't push the left and right margins to full width), but this last problem is just evading me. Any help would be very much appreciated. (I am using a Wordpress Twenty-Twelve Child Theme if that helps)

Undesired Footer

Desired Footer

My current hypotheses are as follows:

  1. There is code somewhere that makes the footer stick to the bottom of the screen with minimal content, and it is constantly applied. From what I understand, the way people do this is by using min-height:100%, but with/without that line it makes no difference.

  2. Maybe there is something not right in terms of my html hierarchy? Twenty-twelve used #masthead, #page, #main, and #colophon. I've come across a couple sites where people say to make sure the footer is outside of the main wrapper. I've done this but it hasn't worked.

  3. Maybe the issue is not in footer at all? Maybe the other containers need to be changed. Maybe #main needs to be set to position:relative; or something (but that hasn't worked).

Here's all the html:

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">

<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>

</header><!-- #masthead -->

<div id="main" class="wrapper">

</div><!-- #page -->
</div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">
</footer><!-- #colophon -->
<?php wp_footer(); ?>


And here's the footer css:

footer {
background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;

Here's the site itself: www.kjel.ca (stackexchange won't let me post more than two links)

Also note that I have tried Ryan Fait's sticky footer which I've seen referenced quite a bit. I haven't been able to get it to work properly. I'm not a professional coder, I'm a musician with a basic knowledge of html and css trying to save cash. If I'm going about the footer the complete wrong way, feel free to set me straight. Any help is most appreciated!

  • It would be really useful to see the page linked, since a CSS inspector in Chrome or Firefox will light up the problem, file,and line number like Xmas. – Imperative Ideas Dec 31 '14 at 5:25
  • Hey Imperative. The site is www.kjel.ca It's posted right at the end but it doesn't stand out very much. – Kjel Sidloski Dec 31 '14 at 20:21
  • Gotcha. The version you have now has the footer height set to 100%. I see what you're trying to do here and I'll put something together for you once I commit my current work on a client project. Luckily, TwentyTwelve is a very simple theme, although I can't think of many reasons not to use TwentyFifteen at this point, since it flows like TwentyTwelve 2.0. – Imperative Ideas Jan 1 '15 at 22:28

Good news, I seem to have fixed the code. I cleaned up the code for #colophon. I changed it from this:

#colophon {
    background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;

To this:

#colophon {
    background: url("http://kjel.ca/wp-content/uploads/2014/12/footer-img-2.jpeg") repeat-x scroll center bottom transparent;
    height: 100%;
    position: absolute;
    width: 100%;
    background-size: 100% 448px;

The value that seems to have been the source of the problem was bottom: 0; That put the footer below the content, but there was a right margin. To fix that I added this:

footer[role="contentinfo"] {
    line-height: 2;
    max-width: 100%;
    margin-top: 0;
    padding: 0px 0px;

Thanks for your help guys.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.