100% Full Width Header and Footer With Centered Content: Revisited (again!)


57 Comments - LEAVE A COMMENT

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” Versions).

Edit 2/27/2012: I’ve updated the files to include a fix for links not being clickable in the header as well as an option to have the footer anchored to the bottom of the page! :D

This is a project I’ve been working on over a few years. I introduced my first solution back in 2008. It worked, but had some limitations. After recieving feedback and comments I once again offered another solution in May 2011 that worked great… at first. After testing myself, and reading more feedback and comments I’ve come across another limitation. When you downsize your browser window enough to require a horizontal scroll a curious thing happened. Scroll over to the right edge of the screen the header and footer no longer stretched 100% across the screen.

See an example of what I mean thanks to commenter alukin.

So I sat down once again today to give it another shot and (hopefully) this time we have nailed it. I’ve tested this on Chrome 4, Firefox 8.01, Safari 5.1.2 on Mac (Snow Leopard), Firefox 9, Chrome 4 and IE7, IE8 and IE9 on Windows (Vista) and iPhone and iPad.

The solution? Well, it was simpler than I thought. At first glance I was going to go with @media queries using max-width and min-width to determine the width of the items… but then I realized that would be silly and excessive. So I started tinkering a bit and came up with a “Doh! I should have figured this out sooner!” solution.

In the last version of my Full Width Header & Footer I had set the width of #header, #footer to 100%. The CSS looked like this:

#header, #footer {
		padding:15px 0;

In the updated version I removed the width:100%; and replaced it with min-width:100%; and it should now work cross-browser! The new CSS for those items looks like this:

#header, #footer {
		padding:15px 0;

Ready to see it in action?

100% Full Width Header and Footer with Centered Content Demo (UPDATED 2/27/2012)

Again, feel free to use and abuse this at will. I’ve even .zipped up the html file for you to download as you like to easily play with it.

Download Source for 100% Full Width Header and Footer with Centered Content (UPDATED 2/27/2012)

That being said, I’ll have to update the code for the 100% Full Width Header/Footer Anchored to Top/Bottom of Page. I will be publishing that shortly, so keep an eye out.

And of course if you run into any future problems or bugs please let me know so I can work on it and keep everyone updated!

Jump to Comments

57 Responses to 100% Full Width Header and Footer With Centered Content: Revisited (again!)

  1. George says:

    That really helped……

    P.S: You’re more like a “CSS-Woman”

  2. Richard says:

    I’ve just stumbled across this page after googling “full width responsive HTML template” and it is interesting seeing your code.Many thanks.

    (As an aside,I wonder why you are not using HTML5 tags eg header / footer with a declared HTML5 doctype? Why do you use div tags for these elements?
    Of course you can use whatever you like, but to me it makes sense to code HTML5 pages with HTML5 tags and really I’m not pedantic! I do prefer validated code though..LOL!).

    Anyway, best wishes and agin thanks for your post…I will take a browse through your site now…

  3. Selvam says:

    Hi lindsey

    Thanks for sharing handy tip and still valid in HTML5 standards.

  4. DWG says:

    My width goes from being full length to leaving a gap every now and then while I am constructing my page. Like it’s seriously changing for no reason after adding things that have nothing to do with the widths. I have no clue what is going on or how to permanently fix it. I’m a noob/student and could use some insight from a pro if anyone wants to chime in. For your knowledge, I’m building from scratch if that matters.

  5. DWG says:

    One last thing, I’m using HTML5 and CSS3 ONLY.

  6. DWG says:

    You can delete my posts. I think I have it figured out for the moment.

  7. Very Useful Post
    Thanx a lots CssGirl :)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>