How To Get Rid Of The Whitespace At The Bottom?

Can someone please help me eliminate the extra whitespace at the bottom of this website? http://www.vonlay.com/ This image shows what I am trying to remove: http://img691.imagesha

Solution 1:

You should add:

#footer.contentp {
    margin-bottom: 0
}

---

I actually wrote another answer before that one that explains what's going on properly, with an alternative fix, here it is:

You should add overflow: hidden to #footer.

This will resolve the problem, which is that the margin on the p element inside <div class="copyright-notice"> is collapsing through #footer. See: collapsing margins.

If this seems unlikely to you, try adding this, just to see what happens:

#footer.contentp {
    margin-bottom: 200px
}

Solution 2:

Try increasing the height of your footer:

#footer { height: 145px; }

Solution 3:

Try setting padding and/or margin on the bottom to zero for the footer and/or body.

Solution 4:

Try using positioning:

#footer {
  position: absolute;
  bottom: 0;
}

Solution 5:

in the footer class change

height: 160px;

try....