Search code examples
htmlcssfooter

Footer will not use 100% of width

My footer, along with the wrapper and body, are set to 100% page width, yet for some reason the footer has a small (25px or so) gap on the right side. I've tried moving it out of the wrapper, but that didn't work. The body already has margin and padding set to 0. I don't have this issue with the header.

Here's the code: http://jsfiddle.net/w63Jk/

Any thoughts as to how I could fix this?

Solution

  • Removing the width from your #header works:

    #header {
    padding:5px;
    /* width: 100%; */
    background-color:#272727;
    height:100px;
    margin-bottom:30px;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;

}

    That's because paddings are adding additional width to the element, if you've defined one in your CSS: http://jsfiddle.net/w63Jk/2/

    Works in IEs, FFs and Chrome.

    Info: Block elements such as DIVs always have the full available width of their parent by default, if no other widths defined via CSS.