We’re rewarding the question askers & reputations are being recalculated! Read more.
1 of 2

With over a page of content the footer remains where the bottom of the screen was at top scroll

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;

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! Oh and here's my site: www.kjel.ca