Getting the footer to stick at the bottom of the page

Use position:fixed; in .footer for second problem.

That makes the footer permanently stick to the bottom of the screen, I want it to go to the bottom of the page. I should only see it when I get to the end of the content. I’ve left it with the change so you can see the effect.

This gets more odd. I’ve created a template for another page, on this page the footer now sits after some of the content, but above a flicker badge. It should go right to the bottom.

Here’s the page.

I have fixed the first problem.
I had removed the !important declaration, thinking it wasn’t doing anything, but it was the thing that was insuring the footer stays the footer and only stays on the bottom of the page if there’s space to fill below.

This article helped me.

It also fixed the problem on this page.

The blog is still acting strangely though. So there must be something wrong in the code of the specific blog page.

For some reason the blog content is not being recognised and the footer is coming right over it. If I give the content a set height the bg and footer move down. I can’t use this as a fix though because blog posts will always be different heights. Here is the code for that section:

HTML Code

<div class="BlogContent">
		<div class="BlogPagePosts">
			<?php if (have_posts()) : ?>
			<?php $temp = $wp_query; $wp_query= null; $wp_query = new WP_Query();
			$wp_query->query('showposts=5'.'&paged='.$paged); query_posts('category_name=blog'.'&paged='.$paged);
			?>
			<?php while (have_posts()) : the_post(); ?>
				<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
					<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
					<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
					</h2>
					<div class="alignleft"><small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
					</div><BR><BR>
					<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
					</div>
				</div>
				<p class="postmetadata">
				Posted in <?php the_category(', ') ?>
				<strong>|</strong>
				<?php edit_post_link('Edit','','<strong>|</strong>'); ?></p>
			<?php endwhile; ?>
			<div class="navigation">
				<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
				<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
			</div>
			<?php else : ?>
 				<h2 class="center">Not Found</h2>
 				<p class="center">
				<?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
			<?php endif; ?>
  		</div>

		<div class="BlogPageAdvert">
			<div class="BlogPageAdvertSpace">
				<!-- Blog Advert -->
				<script type="text/javascript">
				GA_googleFillSlot("Blog");
				</script>
				<!-- End of Blog Advert -->
			</div>
		</div>
	</div>

Corresponding CSS

/* Start Blog Page */
.BlogBG {background-image: url(https://www.srizzil.com/wp-content/themes/Srizzil2/images/blog/bgblog.jpg);  background-color: #E3F1FE; background-position-x:center; background-position-y:top; background-repeat:no-repeat;}
.BlogPage {position: relative; margin-left: auto; margin-right: auto;}
.BlogLogo {position: relative; height: 100px; border="0"; margin-left: auto; margin-right: auto; width: 920px;}
.BlogContent {position: relative; margin-left: auto; margin-right: auto; width: 920px; height: auto;}
.BlogPagePosts {position: absolute; left: 0px; width: 700px; background-color: #ffffff; padding: 10px; text-align:left;}
.BlogPageAdvert {position: absolute; right: 0px; width: 160px; height: 600px; background-image: url(https://www.srizzil.com/wp-content/themes/Srizzil2/images/bg.png); background-repeat:repeat; padding: 10px}
/* End Blog Page */

Does anybody know what’s going on here?

Help?