Search code examples
htmlcssfooter

Footer's website is creating a horizontal scrollbar

This is the website I'm currently working on:

http://whybaguio.com/php/about/about.php

The footer is creating an extra horizontal scrollbar.. I am not too sure what's wrong but could someone help me out? It's also creating an extra whitespace to the left....

Thanks!

Solution

  • This is because you've specified both 100% width and padding on a block element. If you're not too bothered about older IE versions, you can fix this by simply adding:

    #footer {
    width:100%;
    padding:30px;
    ...
    -webkit-box-sizing:border-box; /* Older webkit */
    -moz-box-sizing:border-box; /* Firefox */
    box-sizing:border-box;
}

    You may also want to give your page's body a margin of 0 to let the footer fully reach the left, right and bottom of the screen.