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 {
float:left;
padding:15px 0;
width:100%;
}
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 {
float:left;
padding:15px 0;
min-width:100%;
}
Ready to see it in action?
100% Full Width Header and Footer with Centered Content Demo (FIXED 1/15/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
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!
[...] 1/15/2012 – Please see the latest release of 100% Full Width Header/Footer with Centered Content. [...]
[...] Update #2 1/15/2012 – I have update this version once again, please see the latest release of 100% Full Width Header & Footer with Centered Content. [...]
Good stuff for old school developer to learn off.
Do you do Mobile optimization, especially flexi layout designs?
Hey, this is a reply to Gina – who emailed me. I replied to your address, but I got an error that said the email wasn’t valid.
Gina asked:
And here is my answer – hopefully if anyone else was wondering this will answer your questions:
Yes it is HTML5 friendly. HTML5 accepts most of the past syntax for both XHTML and HTML4. If you would like to make it more semantically correct and take advantage of some of the new tags, get rid of the head and footer divs and replace them with the html5
<header>and<footer>tags (you will still need the wrap divs to center the content within though).Also, if you choose to use the HTML5 tags and want to ensure compatibility with past versions of IE (I believe you still need this for 7 and possibly 8 – if I recall correctly, 9 and 10 both support HTML5 natively) you should use an html5 shiv like the one google provides (you can even link to their library: http://code.google.com/p/html5shiv/
I’ve been trying to figure out an easier way to do this without a bunch of unnecessary code. Thank you : )
this saved me! i have been looking for this header/footer stretch for a repeating background forever and i could not find a resource that could get it right. THANK YOU SO MUCH!!!