Is there another reason for the #outer-wrapper beside holding the outside background image? If not, scrap all that and go back to the default wrapper structure, and apply the background-image to the body{} rule.

If you need the outer-wrapper for something else, either make the footer the same width as #mainWrapper or give it a transparent background (remove background-color). Why are you adding a separate footer div outside #mainWrapper? Why not just style #navSuppWrapper as you want?

A picture of the results you want to see would help us advise on the best way to proceed.