CSS Problem with footer

As you can see from the screenshot I'm having a problem with the footer:

http://i21.tinypic.com/n1pel0.png

The footer is up the page beneath the content on the left column instead of sitting under the right column as its supposed to do.

Here is the index.php source code

<?php get_header(); ?>

<div id="wrapper">

<?php get_sidebar(); ?>

<div id="c1">

	<?php include (TEMPLATEPATH . '/shoppinglist.php'); ?>

	<br />
	<br />

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	
	<div id="h1">
		<h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
	</div>
	
	<p class="small">Filed under: <?php the_category(', ') ?></p>
	
	<?php the_content(__('(more...)')); ?>
		
	<?php edit_post_link('Edit this post', '<p>', '</p>'); ?>
<br /><br />
	<?php wp_link_pages(); ?>
	
	<?php endwhile; else: ?>
	
	<p><?php _e('Sorry we are fresh out of that.'); ?></p>
	
	<?php endif; ?>
	
	<p><?php next_posts_link('&#171; Older Posts') ?> <?php previous_posts_link('| Newer Posts &#187;') ?></p>

<?php get_footer(); ?>

HTML:

Here is the css:

#head	{
	height: 119px;
	width:100%;
	}

#wrapper{
	width:970px; 
	margin:0 auto;
	padding-left:0px;
}

#c1	{
	float: left;
	margin: 0px;
	text-align: left;
	width: 620px;
	}
	
#c2 {
	float: right;
	margin: 0px;
	text-align: left;
	width: 320px;
	}

#footer	{
	background-color: #FFFFFF;
	background-image: url("images/footer-background.gif");
	padding-top: 10px;
	text-align: center;
	width: 100%;
	height: 70px;
	clear: right;
	}

HTML:

I would really appreciate any help you can give

 

A peek at your code and I say clear:both on #footer should fix it... you're only clearing one floated side (the one thats floated right). Also, remove the width:100%; from footer.