Footer overlaps content instead of staying underneath…

  • 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 https://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; }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter keysuuh

    (@keysuuh)

    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!

    Thread Starter keysuuh

    (@keysuuh)

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Footer overlaps content instead of staying underneath…’ is closed to new replies.