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

Jan
15

47 Comments - LEAVE A COMMENT

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 {
		
                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 (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

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

  1. [...] 1/15/2012 – Please see the latest release of 100% Full Width Header/Footer with Centered Content. [...]

  2. [...] 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. [...]

  3. Elliot Rock says:

    Good stuff for old school developer to learn off.

    Do you do Mobile optimization, especially flexi layout designs?

  4. Lindsey says:

    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:

    is the HTML/CSS you wrote for anchoring the footer at the bottom of the page HTML5 friendly?

    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/

  5. David Zupec says:

    I’ve been trying to figure out an easier way to do this without a bunch of unnecessary code. Thank you : )

  6. 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!!!

  7. Kim Black says:

    Hello,

    Thank you for the free code. What a blessing!

    I’m a newbie at this. I cut-and-pasted code from your example that I think applies to what I need.

    For some reason, my gray header is not spanning the full-width. The URL is above.

    Help!

  8. Lindsey says:

    Hey Kim,

    It seems you are not using any type of CSS reset – so your body is inheriting a margin from the browser preset styles, looks like 10px all around. Try setting body {margin:0;} and this should solve the problem.

  9. Kim Black says:

    Hi Lindsey,

    It worked! I cannot thank you enough for answering my questions so quickly. WOW!

    Is there a way I can donate to your work? Really!

    I’m my church’s shade-tree Webmaster. LOL!

    I don’t know CSS. I look around the Web for free stuff, then adapt to our site. Some of it is obvious. Some of it is beyond the obvious. That’s when I ask questions.
    But, please tell me how I can donate.

    Peace to you in Christ Jesus!

  10. Kim Black says:

    Hi Lindsey,

    If you have a Paypal account, I can email you a donation.

    Contact me at my email address.

    Peace!
    Kim

  11. Lindsey says:

    Kim, it was my pleasure to help! Thanks for the donation, sorry I didn’t get back yesterday I’ve been swamped with work! Thanks again!

  12. Tom says:

    Hi Lindsey

    Thank you for the example!

    I’m just finding one problem so far – any links in the header don’t seem to work in chrome or firefox (they work in internet explorer).

    This can be seen on your example page too:

    http://www.cssgirl.com/wp-content/uploads/2012/01/full-width-header-footer3.html

    You have a link on the text “logo of your site!” in the header, which isn’t clickable in chrome or firefox, but is in internet explorer.

    I’m having the same problem happen when trying to implement it myself, any links in the header will not work in chrome/firefox.

    Hope there is an easy way to fix this!

    Tom

  13. Tom says:

    Hi again,

    Just to update you on my earlier comment.

    Having a look at the css, if you remove “position:relative;” from the wrap class then the issue seems to be solved and the links are then click-able in chrome/firefox.

    I’m not too hot on positions, but taking that out doesn’t seem to have an adverse affect on the layout, and it still displays fine in ie6/7/8 as well as all modern browsers.

    Let me know if this is the correct way to fix this or if removing the position will break anything!

    Tom

  14. Kim Black says:

    Hi Lindsey,

    In my header on the right side, I made “Online Giving”, Shopping Cart, and “TTC Logon” “a href” links. But, they are not showing that way. They are not hot/active.

    Do I have to do something in the code. Right now it reads:

    #header p {
    float:right;
    width:450px;
    margin:0;
    }

    Thanks!
    Kim

  15. Lindsey says:

    Hey Kim! If you see Tom’s comment above removing the “position:relative” from the .wrap in the CSS seems to fix this problem. I’m going to fix my file now as well :D I had a bug similar to this on another site, and I did fix it another way, but I can’t remember what I did off the top of my head, but yes, removing the position:relative will solve the issue. (Thanks Tom!)

  16. Kim Black says:

    Thanks! It works. So many browsers out there!

  17. Hi Lindsey, I’ve been trying what you have suggested above but I’m not getting any results. I can extend the the page full length by changing the width of the wrapper to 100% it resizes the header and footer which I want but it also resizes the main body which I don’t want. I tried changing the size of header and footer to 100% but it did not change anything. Is there a way around it or perhaps you can help me apply your method but I haven’t had any luck so far :(

  18. Ali says:

    Hi Lindsey, I tried this method but nothing changes. I’m not sure what i’m doing is wrong, perhaps you can help. Are the above changes to be applied in style.css? Also I have top header and middle header, which one shall I change?

  19. Lindsey says:

    Hi Ali, do you have a url I can look at?

  20. Ali says:

    Hey, sorry for posting twice, the first comment didn’t show up. Well the clickable url is in my name but here it is also http://www.meltingposts.com. I’ve tried all the possible methods but nothing seems to work

  21. Lindsey says:

    Well, the problem is that your header is inside of a main #wrapper that is centering your whole site’s content with a width set to 1020px. If you take a look at the files from this example, you will see both the header and footer are outside of any wrapping elements, so they will expand the width of the browser. Then, inside those elements is a wrapper div (set as a class so it can be used multiple times) that centers the content within the header and footer elements that are set to a width of 100%. So, in order to make that work you will have to modify your website’s HTML/template to have any items you want to expand full width, outside of the wrapper. Also, if you do that, make sure you have your wrapper element set as a class and not an id as you do currently, or else you will not be able to use it multiple times on the page.

    Now, just a heads up – I tried originally loading your site with Chrome (latest) on a Macbook Pro running Snow Leopard and an iMac running Lion and your site will not load due to the slide show beneath the navigation. I had to load up firefox to get it to load. It actually completley crashed my browser 2x in Chrome. The third time I tried to load it with Chrome I had to force close the browser because I couldn’t even get the tab to load.

  22. Ali says:

    Ok well what I did is create a background which gave the header the extended look I wanted. I will use your tips to work on the footer.

    Thanks for the head up, I’m running snow leopard on mac book pro myself and I don’t have any issues loading the site, I checked it with both safari and chrome (latest versions). If this is effecting others then it’s not very good I guess, if the slide show is causing this problem is there a way to fix it?

  23. Jared says:

    I’m still having a difficult time getting my header image to be full width. Here is my existing code. Any idea what I need to do?

    /* Header
    ———————————————–
    */

    #header-wrapper {
    width: 100%;
    margin:0 auto 10px;
    }

    #header-inner {
    background-position: center;
    margin-$startSide: auto;
    margin-$endSide: auto;
    }

    #header {
    margin: 5px;
    text-align: center;
    color:$pagetitlecolor;
    }

    #header h1 {
    margin:5px 5px 0;
    padding:15px 20px .25em;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    }

    #header a {
    color:$pagetitlecolor;
    text-decoration:none;
    }

    #header a:hover {
    color:$pagetitlecolor;
    }

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:700px;
    text-transform:uppercase;
    letter-spacing:.2em;
    line-height: 1.4em;
    font: $descriptionfont;
    color: $descriptioncolor;
    }

    #header img {
    margin-$startSide: auto;
    margin-$endSide: auto;
    }

  24. Cody says:

    Hi Lindsey, I have been trying to solve this same problem for a couple days on a site I’m working on. I tried using the suggestions in this example, but it still doesn’t seem to be working. My site is here:
    http://teamskyfire.elementfx.com/gardenpub/home.htm
    Can you see anything I’ve done wrong? I haven’t used html/css very much, only made 2-3 basic sites, I am much more familiar with coding languages (Java mostly) so a javascript/other language option would work as long as I get this fixed. Tested in Firefox and Chrome.

  25. akhilesh says:

    just check it once and if you have any solution for navigation which i used cufon for the text but problem is that when i mouseover on down of that strip it slides down

  26. Chris says:

    Thanks for this great code!

    One question: Do I need “float:left;” or can I remove it from the code?

  27. Nik says:

    Lindsey, thanks for your solution. While it does solve it for the header/footer, I still get the cut-off result when adding other 100% sections. For example: http://bit.ly/KZMxin
    The grey section behind the slider and the orange/grey section at the bottom get cut off when the window is shrunk. Any ideas?

  28. Nik says:

    I meant to add, if you edit your example page and add an empty div=”test” above the footer, add #test to #header,#footer and give #test a bg color, then shrink the window…you’ll notice the cut.

  29. David says:

    I spent an hour with my flat mate trying to solve this problem last night, before landing on your site. It’s such a simple solution! Thank you for documenting it.

    I’ve since been sneakily testing other sites that I see using the full width header/footer technique, and so far non have tested/or been able to fix it; including government websites.

  30. Kevin says:

    Hi do you know if this works in conjunction with MS Sharepoint? I’ve implemented your solution and it’s not working.

    David are you sure? I’m an intern at a NASA center and I don’t think my mentors would let things like that happen…

  31. j. noronha says:

    I found a solution that works even in IE versions as old as 6:
    #header, #footer {width:100%;height:100(or whatever height you want)px;padding:15px 0;}

    Than you add a clear:both after and .

  32. Adam says:

    I use a solution at: http://goo.gl/G8xvu – 2 columns + 100% footer and header

  33. Hey CSSGirl

    Thanks for the REALLY neat solution to the stretchy header and footy – I’ve been looking for this for a while.

    Quest over

    X

  34. Rob says:

    Thanks for this! Great work and it was just what I needed to fix an issue for work to make the design I’d already worked on looked much more better (Jack Sparrow). Thanks again! I’ll be visiting here for more updates for sure :)

  35. Vines says:

    Thanks a lot, it’s really helping me out!

  36. Thanks for the recent blog on header and footer across body. Great and simple. Just what I was looking for. Really good.

  37. Gemma W. says:

    Thanks for the updated version. But it isn’t responsive. I’ve been trying to find a way of doing exactly the same thing, but responsively.

  38. Anna says:

    Hallo!
    I have a question, I hope some of you could help me.
    My site have a very simple footer. I would like to edit the footer. I would like have a ”Big Foot” for example : http://patterntap.com/pattern/big-simple-footer-spyre-studios

    How create this footer???

    Thank you in advance
    Anna

  39. Daniele says:

    You saved my life! ;-)

    Thank you

  40. Felipe Teixeira says:

    GREAT tutorial, congratulations helped me a lot

  41. Jayakumar says:

    I have been looking for such a solution. But instead of applying the styles to header and footer, I applied them to body tag.
    body {
    float:left; /* or display:inline-block */
    min-width:100%;
    }
    (Instead of float, I tried display:inline-block and it also worked. I know that display:inline-block will not work in IE 7 and below.)

    Can you just check and tell whether this is fine or does this have an impact somewhere else.

  42. Alec Beckwith says:

    I’m building a website for our local SPCA and was having a nightmare with the footers til I used your method. You saved my head from exploding! :-) Thank you.

  43. Guy says:

    Did you ever update the code for “100% Full Width Header/Footer Anchored to Top/Bottom of Page” ?

    Also, is there a simple responsive way to do this exact same thing? That’s all I’m really looking for in the end… Would really love your help CSS Girl!

  44. […] how to master padding and margin. I’m using both of these tutorials for full width bars here and here as […]

  45. Jonas says:

    ugggh. It’s just simply not working for me. The footer is cut off when I do the side scroll.

    screenshot: http://cl.ly/image/1r2T2h3K3Z1A/o

    Any help would be most welcome. I’ve bashed at this one for hours: http://southland.dcsam.com

  46. John S says:

    Thanks Lindsay for sharing your know how on expanding HTML5 headers and footers. Your tuts and code much appreciated!

    Greets from New Zealand (same rock as you) :)

    John

  47. Dhamodaran says:

    i need to make header and footer is full screen
    in this code is not working properly header is ok but footer is not working

    .header,.footer {
    float:left;
    padding:15px 0;
    min-width:100%;
    background-color:#0C6;
    }
    .warper {
    width:900px;
    height:200px;
    margin:0 auto;
    }
    #logo {
    width:300px;
    height:200px;
    float:left;
    }
    #text h1 {
    color:#FFF;
    font:”Arial Black”, Gadget, sans-serif;
    float:left;
    padding-top:45px;
    }
    #clear{
    clear:both;
    }

    tpe

    Thulir Pasumai Eyakkam

    Home
    Arul the Creator
    About Us
    Gallery
    Vision and Mission
    Events
    Cultures
    Pillur
    Contact Us

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=""> <strike> <strong>