Clear and position for footer area problem

  • Filter
  • Time
  • Show
Clear All
new posts

  • Clear and position for footer area problem


    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 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
    //and this is in the footer.php file
    <?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="" target="_blank">WordPress</a> and hosted by *******. </center>
    And here is my CSS code:

    #page-wrap { 
    width: 960px;
    margin: 20px auto;
    width: 100%;
    position: absolute;
    z-index: 999;
    width: 1050px;
    margin: auto;
    .logo-inner span{
    float: right;
    z-index: -999;
    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;
    width: 620px;
    margin-top: 10px;
    margin-left: 5px;
    float: left;
    z-index: -1;
    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;
    background: url('images/footer_bg.png') repeat-x;
    width: 900px;
    height: 25px;
    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!

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


    • #3
      I tried with bottom: 0; and no change....


      • #4
        I told you to change attribute, not value.

        bottom: 100%;

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