Position problem for the footer area

[JustMike]

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!

[Deadweight]

Part of your code:

<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>

Your code with my comments this:

<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><!-- End leftside-content -->
//and this is in the footer.php file
</div><!-- End content -->
<?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><!-- End Footer -->
</div><!-- End page-wrap -->

I think you need to do something like this:

<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><!-- End leftside-content -->
//and this is in the footer.php file
</div><!-- End content -->
<?php get_sidebar(); ?>
</div><!-- End page-wrap -->
<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><!-- End Footer -->

[traq]

Since we're talking about styling and layout, it would be much more helpful if you shared your HTML markup, rather than the contents of your PHP scripts.

[JustMike]

@Crazykld69
I have tried that and it doesn't work.
@traq
Sorry, I thought that it's enought to show only the divs and css code from my wordpress theme.
HTML & CSS Files
Sorry, I didn't uploaded via attachment because the archive is 200 Kb and the limit for attachments is 97 Kb

[molendijk]

JS and CSS for footers:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Footer</title>
<script>
if(navigator.userAgent.indexOf('Chrome')>-1)
{document.body.style.overflow-y=scroll} // needed for Google Chrome
</script>
</head>
<body >
<!-- You may change all styles in the footer div except 'position: fixed' and 'bottom: 0px' -->
<div id="footer" style="position: fixed; left: 0px; right: 0px; bottom:0px; background: darkred; color: white; text-align: center; font-family: verdana; font-size: 12px; ">I'm a footer<br>Yes I am</div>
content<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>con tent<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br >content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>co ntent<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>content
</body>
</html>

[JustMike]

This is making the footer fixed, I want to make it to stay on the bottom of the page, after the content area, but the position from the content div and from the sidebar div is not letting the clear property to work...

[molendijk]

What happens if you move this:

<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>

to the end of the div having class="leftside-content", just above its closing div-tag?

[Deadweight]

Hey its me again. Try my idea again and change the css to this:

#footer{
background: url('images/footer_bg.png') repeat-x;
width: 900px;
height: 25px;
clear: both;
z-index: 10;
}

[JustMike]

@molendijk - If I move the footer after the leftside-content div the footer will hang over the text and under the sidebar div.
@Crazykld69 - Now the footer is under the content div in the middle of the page, not at the bottom of the page.

[Deadweight]

Ok give me a sec. Ill actually make it so it works. xD