How do I make the footer extend the remainder of the page when I'm using a gradient?

Question

I have a page with 3 basic elements. You have your main content which runs down the center of the page at about 80% and has a white background. On the side of that main content you have the left and the right side at 10% each which for design reasons is grey. So far So good. Now I have my footer which as of recently was contained as a sticky footer and remained at the bottom of the page. I want the footer to be at 100% width and sit right under the content and if the page is being viewed on a screen that is too large then have the footer fill the rest of the page with white.

  <p> I've tried everything that i know with the CSS I think I'm just missing something simple. I have to put some code in here to link to a fiddle </p>

Here is a link to the fiddle: http://jsfiddle.net/dPek3/

Answer 1

You fake it by making your body background color the same color as your footer. You usually have to have a wrapper that contains your content to overlap this change, but it is extremely effective and I would recommend it. You also need to clear your floats. Here is a working example: http://jsfiddle.net/dPek3/1/