Hi!I am working at a 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>©<?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, I also put the footer div after the page-wrap div.Here is a picture of the design with the current code:
Thanks in advance for your help!