WordPress.org

Ready to get started?Download WordPress

Forums

Footer overlaps content instead of staying underneath... (3 posts)

  1. keysuuh
    Member
    Posted 1 year ago #

    I'm trying to position my footer at the way bottom of the page with no space. It looks fine in this screen shot: ScreenShot1.
    But in this one: ScreenShot2, I scrolled down and the footer overlaps the content and doesn't stay at the bottom. I don't want to post my link for search engine issues...Sorry.

    Check out http://www.carolrivello.com/ as an example of what I wish to accomplish.

    This is my footer.php file: Footer ScreenShot

    and this is part of my CSS//

    #Page{ width: 850px; margin: 0 auto; }
    #Header { background: url() no-repeat; height: 318px; width: 900px; position: relative; right: 50px; margin: 0px auto; }
    #headerimg { position: relative; top: 125px; }
    
    .links { margin-top: 105px;  }
    .links a{ font-family: OstrichSansBlack; font-size: 20px; color: #fff; background: transparent url(images/footer_bg.png); text-decoration: none; padding: 4px 8px 4px 8px;  }
    .links a:hover { font-family: OstrichSansBlack; font-size: 20px; color: #fff; background: #ff009e; text-decoration: none; padding: 4px 8px 4px 8px;  }
    .links li  { height: 50px; margin-bottom: 10px; position: relative; list-style: none; display: inline; }
    
    #Content { margin-top: 20px; width: 600px; float: right; }
    	.post { padding: 5px; margin-bottom: 20px; }
    #Clear { clear: both; }
    
    #Footer { color: #fff; background: url(images/footer_bg.png) 0 0 repeat-x; height: 200px; width: 100%; position: absolute; left: 0px; bottom: 0px; margin: -10px 0 0; clear: both;}
    	 .wrap { position:relative; margin:0 auto; width:900px; }
  2. keysuuh
    Member
    Posted 1 year ago #

    I think I resolved this...
    Positive thre was some other way to do so...
    But I ended up taking my Footer Div and moving it under the content div instead of staying inside the content Div.
    Then I made the footer position: Relative; instead of absolute.
    and now the footer is where I'd like it to be :)

    If there are any other solutions PLEASE post!

  3. keysuuh
    Member
    Posted 1 year ago #

    Ran into another problem...
    the footer looks perfectly fine on the news page, there are blog entries and then the footer appears AFTER the entries.
    But if you click the links to the other pages there is no content yet,
    and so I guess without large enough content the footer went back up the page. Instead of staying at the way bottom!!!!

Topic Closed

This topic has been closed to new replies.

About this Topic