[Solved] How can I get rid of space on right/left of footer?

[HeatherFeimster]

Hello all! Links and code below are for a website layout that I’m working on. Pretty simple/straightforward, except that when I put the "sticky footer" css in, it adds some very unattractive spacing to the right/left of my footer.

Any suggestions on how to get the footer to fill the whole width of the browser window?

Thanks in advance!
(PS – please ignore the giant blank spot for content in the middle – I’m working on the overall layout currently :) )

Live Link:
http://themolehillproject.com/plaidzebra/

HTML:

Code:

 

Home  ~  Shop  ~  About  ~  Contact  ~  Policies  ~  Shipping  ~  Returns
Colors&Specs  ~  Manufacturers  ~  WeSupport  ~  Terms&Conditions
Account  ~  Basket  ~  Login  ~  Checkout

© 2010 The Plaid Zebra, LLC  ~  Friendswood, Texas
Designed by H. Feimster  ~  Powered by OpenCart

CSS:

Code:

@charset “UTF-8″;
/* CSS Document */

html, body {height: 100%;}

#wrapper {min-height: 100%;}

body {
background-image: url(‘images/PZ_template8_03.jpg’);
color: #111111;
}

#ribbon {
width: 100%;
background-image: url(images/bkgd_zebra_big.jpg);
height: 244px;
border-top: #111111 solid 10px;
border-bottom: #111111 solid 10px;
position: absolute;
top: 204px;
left: 0;
z-index: -2;
}

#wrapper {
width: 1024px;
margin: 0 auto;
padding: 0;
}

#main {
overflow: auto;
padding-bottom: 45px;
}

#header {
width: 100%;
margin: 0 auto;
height: 200px;
position: static;
z-index: 1;
}

#navigation {
margin: 5px auto;
width: 100%;
height: 244;
z-index: 1;
text-align: center;
}

#navigation img {
margin: 0 auto;
}

#sidescroll img {
margin: 0 auto;
position: absolute;
top: 260px;
z-index: -1;
}

#maincontent {
width: 834px;
margin: 0 auto;
background-color: #f9f2e7;
border: #111111 solid 5px;
z-index: 2;
height: 680px;
}

#footer {
width: 100%;
background-image: url(images/bkgd_zebra_small.jpg);
height: 62px;
border-top: #111111 solid 10px;
border-bottom: #111111 solid 10px;
position: relative;
margin-top: -62px; /* negative value of footer height */
height: 62px;
clear: both;
z-index: -1;
}

#footwrap {
width: 840px;
margin: 0 auto;
padding: 12px 0 5px 0;
}

#footlinks h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.5em;
font-weight: normal;
margin: 0;
padding: 0;
float: left;
width: 320px;
}

#socialmedia {
float: right;
width: 100px;
text-align: right;
margin-top: 15px;
}

#socialmedia img {
padding: 0 2px;
}

#copyright h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.5em;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}

/*Opera Fix*/
body:before {
content:””;
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}

[noahgelman]

When you build a site, should always start your css with:

Code:

* { margin:0; padding:0;}

It is an automatic reset that zeros out all the default padding and margin for all elements. Your body gives an automatic margin of 10 pixels around the sides and bottom, it’s pushing your footer in. This will fix it for ya.

[Author]

Posts