As I work on developing my artist website to showcase my music, I have encountered an issue with the footer placement. My goal is seemingly simple - I want a footer that always sits at the bottom of the site, just under the content/body section. There should be no white space on the left, right, or bottom. Ideally, when there is minimal content on the page, the footer will still hug the bottom of the screen. However, the challenge arises when the content extends beyond one page; instead of pushing the footer down, it remains fixed in its position, causing overlap issues with other content.
I've spent days searching through various sites and forums trying different solutions. While I've made progress by adjusting margins and positioning, this particular problem persists. Any assistance would be greatly appreciated. (For reference, I am using a Wordpress Twenty-Twelve Child Theme)
View Undesired Footer Image
View Desired Footer Image
My current thoughts on potential causes are:
There might be code forcing the footer to stick to the bottom of the screen, irrespective of content amount, possibly utilizing min-height:100%. However, adding or removing this line yields no change.
There could be a hierarchy issue within the HTML structure? The Twenty-Twelve theme uses #masthead, #page, #main, and #colophon elements. Some sources suggest placing the footer outside the main wrapper, which I've done without success.
The problem may not lie in the footer itself but possibly in surrounding containers like #main requiring specific positioning adjustments (e.g., setting position:relative), yet this approach hasn't resolved the issue.
Provided below is the entire HTML snippet:
<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(); ?>
</body>
</html>
The CSS styling for the footer is as follows:
footer {
background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;
height:100%;
width:100%;
position:absolute;
margin:0px;
padding:0px;
bottom:0px;
min-width:100%;
}
Despite attempting commonly recommended solutions like Ryan Fait's sticky footer, I have struggled to achieve the desired outcome. As someone with limited coding expertise seeking cost-effective options, any guidance on rectifying footer placement woes would be immensely valuable. Visit my site at www.kjel.ca for further context. Thank you!