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:

http://iceimg.com/i/28/38/2aec120214.jpg
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 (http://www.cooltips.biz/wp-content/uploads/2013/09/theme_work.zip)
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>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>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>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

[Deadweight]

BEFORE DOING ANYTHING SAVE YOUR CODE AND TEST THIS OUTSIDE OF YOUR SERVER. SAVE THIS AS A NORMAL HTML FILE!!!!!!!

I changed the code a bit because i am wondering if you were looking for something I'm about to show you. I made it out of css and you will be able to add your PHP code after.

CSS INFORMATION


@charset "utf-8";
/* CSS Document */

html, body {
margin:0 auto;
padding:0;
background-color:#000000;
}

/* Inside sections */

#main_outline {
width: 80%;
margin:auto;
height:auto;
background-color:#FFFFFF;
border:5px solid blue;
border-top: none;
border-bottom: 2px solid blue;
}

#main_title {
font-size:24px;
font-family:"Lucida Console", Monaco, monospace;
border-bottom:1px solid black;
text-transform:capitalize;
padding: 3px;
text-align:center;
font-weight:bold;
}

#sub_outline {
width: 100%;
height:350px;
border-bottom:1px solid black;
}

#main_left {
width:150px;
height:350px;
border-right:1px solid black;
float:left;
}

#links_menu {
width:150px;
list-style:none;
margin:0;
padding:0;
}

#links_menu li {
text-align:center;
}

#main_right {
float:inherit;
background-color:#999;
margin-left:150px;
height:350px;
}

#content {
border-bottom:1px solid white;
padding-left: 2px;
}

.objects {
border:1px solid white;
border-top:none;
border-bottom:none;
width: 80%;
margin: auto;
height:329px;
overflow:auto;
}

#bottom {
border-bottom: 1px solid black;
}

#footer {
text-align:center;
font-size:11px;
}




HTML INFORMATION

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outline 2</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

<div id="main_outline">

<div id="main_title">
Different
<!-- Main title end--></div>

<div id="sub_outline">

<div id="main_left">
<ul id="links_menu">
<li id="fake_link" onclick="change_text('')">Links</li>
</ul>

<!--Main Left end--></div>
<div id="main_right">
<div id="content">
Something
</div>
<div class="objects">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum velit dolor, lacinia luctus nisl malesuada dignissim. Aliquam vulputate condimentum ullamcorper. Cras consequat commodo sapien, vitae gravida urna. Fusce posuere, eros nec scelerisque condimentum, lacus diam blandit diam, vitae porta risus quam eu augue. Vivamus bibendum mauris at dui molestie venenatis. Donec egestas arcu eu bibendum pretium. Vestibulum pellentesque volutpat elit. Duis id mi risus. Vestibulum aliquet, neque nec fringilla accumsan, leo ligula faucibus odio, sed pretium diam lectus quis urna. Sed varius massa ac est condimentum aliquam. Mauris porta lorem vitae felis commodo, sit amet tincidunt odio dictum. Aliquam ultrices elit id est pretium, eu mattis lorem ornare. Quisque lacus lacus, egestas non justo ac, eleifend congue odio.<br /><br />

Morbi in posuere tortor. Cras consectetur, arcu non scelerisque iaculis, lacus felis semper lectus, nec blandit ligula magna in nisl. Curabitur fermentum libero libero, vitae sagittis mauris convallis nec. Phasellus volutpat placerat purus at lobortis. Mauris ac massa vitae odio bibendum tristique quis id est. Quisque at mattis lacus. Quisque mollis justo non lorem suscipit, non bibendum eros lobortis. Aliquam erat volutpat. In ac purus ac dolor convallis fringilla. Suspendisse pharetra ultricies diam varius aliquet.<br /><br />

Donec porttitor sapien in sem aliquam, vel sagittis magna iaculis. Maecenas dictum est nibh, eleifend posuere nulla scelerisque ac. Proin cursus eu urna a feugiat. Curabitur lectus est, pharetra sed dui sed, ullamcorper consectetur odio. Cras auctor, quam non vehicula aliquam, nibh ante sodales urna, quis scelerisque quam odio id neque. Nunc neque quam, gravida sed nibh vel, facilisis mollis leo. Pellentesque malesuada leo sit amet condimentum accumsan. Donec non lacus at lorem venenatis dictum. Suspendisse mi est, accumsan eget ligula quis, auctor congue enim. Sed ultrices sem turpis, consectetur suscipit dolor imperdiet eget. Aenean adipiscing tellus vitae massa imperdiet vehicula. Proin orci metus, eleifend vel nulla vel, porta laoreet massa.
</div>
</div>

<!--Sub outlin ende--></div>

<div id="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum velit dolor, lacinia luctus nisl malesuada dignissim. Aliquam vulputate condimentum ullamcorper. Cras consequat commodo sapien, vitae gravida urna. Fusce posuere, eros nec scelerisque condimentum, lacus diam blandit diam, vitae porta risus quam eu augue. Vivamus bibendum mauris at dui molestie venenatis. Donec egestas arcu eu bibendum pretium. Vestibulum pellentesque volutpat elit. Duis id mi risus. Vestibulum aliquet, neque nec fringilla accumsan, leo ligula faucibus odio, sed pretium diam lectus quis urna. Sed varius massa ac est condimentum aliquam. Mauris porta lorem vitae felis commodo, sit amet tincidunt odio dictum. Aliquam ultrices elit id est pretium, eu mattis lorem ornare. Quisque lacus lacus, egestas non justo ac, eleifend congue odio.<br /><br />

Morbi in posuere tortor. Cras consectetur, arcu non scelerisque iaculis, lacus felis semper lectus, nec blandit ligula magna in nisl. Curabitur fermentum libero libero, vitae sagittis mauris convallis nec. Phasellus volutpat placerat purus at lobortis. Mauris ac massa vitae odio bibendum tristique quis id est. Quisque at mattis lacus. Quisque mollis justo non lorem suscipit, non bibendum eros lobortis. Aliquam erat volutpat. In ac purus ac dolor convallis fringilla. Suspendisse pharetra ultricies diam varius aliquet.<br /><br />

Donec porttitor sapien in sem aliquam, vel sagittis magna iaculis. Maecenas dictum est nibh, eleifend posuere nulla scelerisque ac. Proin cursus eu urna a feugiat. Curabitur lectus est, pharetra sed dui sed, ullamcorper consectetur odio. Cras auctor, quam non vehicula aliquam, nibh ante sodales urna, quis scelerisque quam odio id neque. Nunc neque quam, gravida sed nibh vel, facilisis mollis leo. Pellentesque malesuada leo sit amet condimentum accumsan. Donec non lacus at lorem venenatis dictum. Suspendisse mi est, accumsan eget ligula quis, auctor congue enim. Sed ultrices sem turpis, consectetur suscipit dolor imperdiet eget. Aenean adipiscing tellus vitae massa imperdiet vehicula. Proin orci metus, eleifend vel nulla vel, porta laoreet massa.
</div>

<div id="footer">
This is the footer information
</div>

<!--Main outline end--></div>

</body>
</html>