Im trying to make my footer to be at the end of the page, so I'm using position:absolute and bottom:0 to do this. The problem is the background color will not be extended to fit the screen, so I tried using width:100% but now it has extra pixels

this is the example i created http://jsfiddle.net/SRuyG/2/ (sorry it's a bit messy, i'm just starting to learn css)

I also tried the sticky footer from some tutorials i found but it's not working either. So how exactly can I set the footer to the bottom of the page and the background fits the screen size?

Thank you

CSS:

html, body {
    margin: 0;
    padding: 0;
}

body {     
    font: 13px/22px Helvetica, Arial, sans-serif;  
    background: #f0f0f0;  

} 

.contentWrapper{
     min-height: 100%;
     margin-bottom: -142px; 
}

.contentWrapper:after {
  content: "";
  display: block;
  height: 142px; 
}

nav {
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    box-shadow: 0px 0px 4px 4px #888888; 

}

#navBar li{
    display:inline;
}

#navBar li a{
    color: #fff;
    text-decoration: none;
    padding: 25px;
}
#navBar li a:hover{
    background:#fff;
    color: #222;
    text-decoration: none;
    padding: 25px;
}

footer {
    position:absolute;  
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    bottom:0;
    width: 100%;

}

HTML:

<body>  

    <nav>  
        <ul id='navBar'>  
            <li><a href="#">link 1</a></li>  
            <li><a href="#">link 2</a></li>  
            <li><a href="#">link 3</a></li>  
        </ul>
    </nav>  



    <div id="contentWrapper">
        <section id="intro">  
        <header>
html css width
Edit
Report