Per usare il width: 100% e` necessario che sia definita la larghezza del contenitore.

Quindi il tuo CSS dovrebbe diventare:
codice:
html {
  width: 100%;
}

body {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

#wrapper {
  margin: 0 auto;
  width: 900px;
  position: static;   /* e` il default, ma lo specifico per sicurezza */
}

#header {
     width: 900px;
     float: left;
     height: 100px;
}

#navigation {
  position: absolute;     /* questo sgancia il posizionamento dal suo contenitore statico e lo aggancia al body */
    /* float: left;    --- non puo` essere flottante, dato che e` assoluto -- */
  width: 100%;
  margin-top: XXXpx;    /* dove XXX e` la somma delle altezze dei blocchi precedenti */
}

#footer {
    width: 900px;
    clear: both;
}
Questo dovrebbe risolvere il tuo problema, ma rende il navigation non relativo ai blocchi precedenti, per cui va lasciato lo spazio.
Se i blocchi preced hanno altezza fissa, non e` un problema; se hanno altezza variabile, la cosa diventa complessa.


In alternativa, puoi cambiare un po' la logica, dando il width:900px e margin:0 auto a tutti i blocchi che vuoi piu` stretti, e lasciando il width 100% al wrapper