Responsive Full Width Header & Footer with Centered Content

Full Width Header, Footer, Content Areas with centered content. "Anchored" Header/Footer version also included.

See article here: (Link Coming Soon)

View demos

CSS Full width Header, Footer and Content areas with centered content - now responsive!

A one page example of how to create sections of the site with full width backgrounds (color, images, etc can be used), where the content is centered.

This is based off some older examples I provided on CSSgirl which where not responsive (eeeeewwww!) and contained fixed widths and didn't work well when zooming.

CSS Full Width Anchored Header & Footer!

The fixed-full-width folder contains and example of the same technique as above, only the header and footer will always be "anchored" to the top and bottom of the window.

Browser/Device support

It should work EVERYWHERE (IE7 and up). But if you encounter bugs, please feel free to let me know, or contribute!

Tested in (all latest stable versions):

• Chrome
• Firefox
• Opera
• Safari
• iOS Safari, Chrome
• annnnd IE 7-11

I don't have an Andriod device to test in (aside from my Kindle Fire 1st gen, so if anyone sees issues on Android - let me know or create an issue please).

Upcoming updates

• Background image example
• Gradient example

Possible Future updates

• Navigation example.