CODEWITHSUNDEEP
jquerycssfooter
Kenneth Kjær Nielsen
Kenneth Kjær Nielsen

Reputation: 55

Footer overlaps

I am using a jQuery menu slide and have some problems with my footer.

My footer overlaps all my other content when i zoom in. Resulting in, if u see the website in a minor resolution u wont get all the content.

I have tried removing position absolute, but then the footer goes to the top of the screen.

I need my footer to always be under my content, no matter what height the content has.

Is this possible with this script?

Website: http://kennethkjaer.gofreeserve.com/

#footer { 
  /* Footer container (whole browser width) */
  background-image:url(../images/footer_bg.jpg);
  bottom: 0;
  position:absolute;
  width: 100%;
  height:85px;
  padding-top:10px;
  padding-bottom: 5px;
}
#footer_box { 
  /* Centered footer container with som padding to align properly the content */
  width: 820px;
  height:30px;
  margin:0px auto;
  position: relative;
  padding:0px 10px 0px 10px;
}
#footercontent {
  width: 360px;
  height: 30px;
  float: left;
  padding: 0px;
}
#footerimg {
  width: 100px;
  height: 30px;
  margin: 0px;
  float: left;
}
#footerimg p {
  float: right;
  margin: 38px 0px 0px 0px; !important;
}

Upvotes: 1

Views: 296

Answers (2)

Abhranil Das
Abhranil Das

Reputation: 5918

From your question I am assuming you do not want a sticky footer.

In that case it is the position:absolute and bottom:0 that is causing the problem. You are telling the footer to always stick to the bottom (bottom of the browser window, not bottom of your document), even if other content gets there. So as the other content on your webpage reaches the bottom part of the browser window, it is being covered by the footer. If you remove this CSS, this will be solved. If the footer part of the HTML comes at the end of your HTML for the page, it will naturally be at the bottom (of the document) but you might have to scroll down to see it as it won't stick to the bottom of the browser window any more. Take a look at this website for reference. I am assuming this is the kind of footer you want.

Upvotes: 2

sandeep
sandeep

Reputation: 92803

First of all i want to say your markup is not good. As per your requirement may be you can use sticky footer method for this

Check link http://ryanfait.com/sticky-footer/

Upvotes: 1

Related Questions