CODEWITHSUNDEEP
htmlcsssticky-footer
Teilmann
Teilmann

Reputation: 2168

Sticky footer not sticking to bottom of page

I seem to have a problem with the footer on my website. Basically its not sticking to the bottom of my page, but sticking to the bottom of my div, called main. Can anyone help me with this?

If you zoom out on the webpage you will see the problem :)

this site

Im not pasting in the code, cause its a lot of php includes and such. Hope it's okay. :)

footer css:

#footer{
width: 100%;
float: left;
height: 70px;
bottom: 0;
clear: both;
background-image: url("../images/footer_pattern.png");
display: block;

}

Upvotes: 3

Views: 2479

Answers (2)

chop
chop

Reputation: 99

For the website you are referring to, by extending the wrapper div, it will push the footer down. Below is the modified css for wrapper.

  #wrapper
  {
      height: 100%;
      margin: 0 auto;
      min-width: 1000px;
  }

Put 100% for the height instead of auto.

By making the wrapper height to 100%, it extends that div to the bottom of the window and pushes the footer down as well.

Another thing I would change is not make #footer float left.

Upvotes: 2

Tom
Tom

Reputation: 311

#footer{
    width: 100%;
    height: 70px;
    clear: both;
    background-image: url("../images/footer_pattern.png");
    position: fixed;
    bottom: 0;
}

Upvotes: 4

Related Questions