Clear and position for footer area problem

[cedry2k]

Hi!

I am working at a new wordpress theme and I have a problem that I can't figure out.

This is the the HTML code I have:

//this is in the header.php file
	<div class="logo">
		<div class="logo-inner">
			<a href="<?php echo get_option('home'); ?>"><img src="LOGO_HERE" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a>
			<span><a href="AD_URL" target="_blank"><img src="AD_IMG"/></a></span>
		</div>
	</div>
<div id="page-wrap">
	<div class="content">
//this is in index.php, single.php, page.php and so on
<div class="leftside-content">
//the loop here
</div>
//and this is in the footer.php file
</div>
<?php get_sidebar(); ?>
	<div id="footer">
	<center>&copy;<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/>
			<?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center>
	</div>
</div>

And here is my CSS code:

#page-wrap { 
width: 960px;
margin: 20px auto;
}
.logo{
width: 100%;
position: absolute;
z-index: 999;
}
.logo-inner{
width: 1050px;
margin: auto;
}
.logo-inner span{
float: right;
z-index: -999;
}
.content{
margin-top: 90px;
padding-top: 30px;
margin-bottom: 10px;
width: 960px;
background: white;
outline:rgba(0, 0, 0, 0.1) solid 6px;
position: absolute;
z-index: 8;
}
.leftside-content{
width: 620px;
margin-top: 10px;
margin-left: 5px;
float: left;
z-index: -1;
}
#sidebar{
margin-top: 110px;margin-right: -25px;
padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;
background: url('images/scribble_light.png');
outline:rgba(0, 0, 0, 0.1) solid 6px;
width: 280px;
float: right;
position: relative;
z-index: 9;
}
#footer{
background: url('images/footer_bg.png') repeat-x;
width: 900px;
height: 25px;
top:100%;
clear: both;
position: absolute;
z-index: 10;
}

I can't figure out how to make the footer to stay under the page-wrap div, on the bottom of the page.
The clear property clear doesn't work, I also tried with overflow: auto in the page-wrap, positioning the footer, :after for the page-wrap and :before for the footer.
Here is a picture of the design with the current code:

Thanks in advance for your help!

[arnage]

In #footer is set top:100%, try to change the att to bottom.

[cedry2k]

I tried with bottom: 0; and no change....

[arnage]

I told you to change attribute, not value.

bottom: 100%;

... if not, give a try to vertical align att.