How to make a footer fixed in the page bottom

In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.

I am currently using this CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

But the full page width isn't filled with this css code.

Any help? Thanks!

I use sticky footer: http://ryanfait.com/sticky-footer/

/*

    Sticky Footer by Ryan Fait
    http://ryanfait.com/

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.

This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.

you could make the footer div absolute to the page like this:

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}

I use a few DIV elements for each section of my webpages.

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.

I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.