In 2008 I started exploring different ways to make a full-width header and footer, and over the years I have simplified, responsified (this should be a real word) and updated my technique. The prior iteration of this technique I released still relied on fixed width containers and it definitely wasn't responsive. This (probably, most likely, maybe) is the last version I'll be releasing. It's fully responsive, doesn't have any issues with zooming and should be simple enough to understand if you have basic (if limited) knowledge of CSS.
What you will see here are two examples of how to do this very common technique you will probably encounter the need for many, many times.
The first example is "full width" sections on the site (most commonly the header & footer and even different sections through pages) that have the content centered while the background color/image/gradient extends to entire width of the window.
The second, "fixed/sticky/anchored" (however you want to call it) example is using the same technique, except the header and footer stay "anchored" to the top and bottom of the window as you scroll. You can use both, or just one or the other.
This version is compeltely responsive. Don't use the other versions. They suck. Seriously, don't use them anymore. Pretend I never wrote that poopy-code. Now, there are no floats used on the major elements. No fixed width elements. And I've used ems instead of pixel measurements. I've removed the use of IDs and used some simple class names for a quick example. Please name your classes more semantically. In fact you should take a look at BEM and SMACSS. The HTML is using HTML5 tags instead of div soup.
Feel free to use this technique to your heart's content. Tell all your homies. No rules. I'd love it if you didn't reproduce this and claim it as your own, but whatevs.
It would be cool to know if you've used it, or if you found it helpful.
**This is geared towards those new to code, who need a little help getting the basics down!**