New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions)

Feb
1

8 Comments - LEAVE A COMMENT

[Feb 1st, 2015] I’ve finally updated my code examples for the very popular series I’ve shared with how to center content within a section that has a “full width” (or “full bleed”) background (100% Full Width Header & Footer with Centered Content series: v1 v2 v3 – disregard all of those now!).

full-width-ex

This also includes an update for the full width examples of the header & footer that stay anchored to the top/bottom of the window (First edition here: How to: Anchor the Footer to Bottom of Page (or Header to Top)!).

full-width-fixed-exBoth of these versions are now responsive, the HTML and CSS both updated.

You can view the new examples on github and download it to use in any way you’d like!

Jump to Comments

8 Responses to New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions)

  1. […] Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Vers…. […]

  2. […] Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Vers…. […]

  3. […] Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Vers…. […]

  4. […] Update 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Vers…. […]

  5. Ron Boat says:

    Ms. CSS,

    I love the fact you were helpful in the 100% wide footer thing but…. for a non-programmer, can you use just the footer added to a page and not the rest? I’m trying to get a gray banner across the bottom with some social icons i have. Thoughts?

    Thanks so much

  6. Ron Boat says:

    Ms. CSS,

    I love the fact you were helpful in the 100% wide footer thing but…. for a non-programmer, can you use just the footer added to a page and not the rest? I’m trying to get a gray banner across the bottom with some social icons i have. Thoughts?

    Thanks so much

  7. Joseph Booth says:

    Hi CSSGirl,
    Very nice site. Stumbled across it while googling “how to make a code sample css”. I was basically looking for a css code sample to print ‘code like’ text on my page.

    You provided this page: Style your code samples without excessive markup

    I’ll keep checking out your site as I work on rebuilding my own. It appears that you have some great resources. Very cool.

    Thank you for publishing and sharing such great content.

    Sincerely,

    Joseph Booth

  8. Harry Allsop says:

    Keep up the awesome work – thanks for so many helpful tips and code!

Leave a Reply

Your email address will not be published. Required fields are marked *