Question

I seem to be having a problem with my footer growing to 100% width of the page. Currently when it expands there is a gap on each side of the footer. I tried putting the footer outside the the wrapper and inside and pretty much get the same results. I’ve attached my code to see if anyone can spot what im doing wrong.

<div id="wrapper"> <!--Begin Wrapper -->

<div id="riaandoviwrap">
<div id="riaandovi">Ria And Ovi</div>
</div>

<div id="slideshowwrap">
<div id="slideshow"><img src="images/DSC00495.JPG" /></div>
</div>

<div id="slideswrap">
<div id="slide1">SLIDE 1</div>
<div id="slide2">SLIDE 2</div>
<div id="slide3">SLIDE 3</div>
</div>

<hr />

<div id="contentwrap">
<div id="content"></div>
</div>

<div id="footerwrap">
<div id="footerleft">© 2012 Ria and Ovi</div>
<div id="footerright">Share this on:</div>
</div>

</div> <!--End Wrapper -->

body {
    background: #f7f6f6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
#wrapper {
    width: 100%
}
#riaandoviwrap {
    width: 300px;
    min-height: 150px;
}
#riaandovi {
    font-family: Script;
    font-size: 75px;
}
#slideshowwrap {
    width: 950px;
    background: url(../images/slider-bg2.png);
    clear: both;
}
#slideshow {
    min-height: 350px
}
#slideswrap {
    width: 950px;
    min-height: 100px;
    background: #09F;
    margin-top: 6px;
    clear: both;
}
#slide1 {
    width: 300px;
    float: left;
}
#slide2 {
    width: 300px;
    float: left;
}
#slide3 {
    width: 300px;
    float: left;
}
#contentwrap {

}
#content {

}
#footerwrap {
    min-height: 105px;
    background: url(../images/footer-bg.png);
    margin: 0px;
}
#footerleft {
    width: 350px;
    float: left;
}
#footerright {
    width: 350px;
    float: left;
}
hr {
    max-width: 950px
}
img {
    border: 5px solid #FFF
}

Answer 1

Set padding and margin to zero for the body tag. Althought you’re not setting one manually, browsers do have a default padding/margin.