Edit Question - KnowledgeHub

Title Body

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>

Tags (comma-separated) Cancel