How to: Create Full (100%) Width Header/Footer with Centered Content (Updated)

May
28

59 Comments - LEAVE A COMMENT

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

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

I originally wrote a tutorial on how to “Create Full Width Header & Footer With Centered Content Using CSS” almost three years ago (yipe!) when I was working on one of the many redesigns of my site. Looking back on it now (since it’s one of my most popular articles), I see it’s slightly different as to how I have been doing it recently. Both methods work, both can be used, but I find my current method a little bit “cleaner”.

Before I get into the “how to” of this method, I’d like to explain WHY you may choose to do it this way. Typically, you would choose to create a separate header and footer at full width because you have a background that is meant to repeat horizontally for each and is different from your main content background. This is just one method if you need to separate your header and footer from the main area.

In my previous example I was defining an empty header <div> for our full width background, then positioning the centered content on top of it using a negative margin-top. I believe at the time this had to do with my decision to use two separate images for the background of both my header and body areas.

The method I’m going to explain now will be using some of the same principles, but removes the empty <div> and gets rid of any negative margins. And, this method will be the same for both your header and your footer.

Before we start let’s check out a super simple demo of what we are trying to achieve.

Very simply your HTML for the header will look something like this (replace the logo & other text with whatever content you would like – nav elements, heading elements, etc!):


     <div id="header">
          <div class="wrap">
               <div class="logo">
                    <a href="#"><img src="images/yourlogo.png"></a>
               </div>
               <p>Other content for your header</p>
          </div>
     </div>

And for the footer:


     <div id="footer">
          <div class="wrap">
               <p>This would be your footer content!</p>
          </div>
     </div>

And, now the CSS.


	.wrap {
		position:relative;
		margin:0 auto;
               /*replace 900px with your width*/
		width:900px;
	}

	#header, #footer {
		width:100%;
		float:left;
	}

Yeh, it is really that simple!

In the example you can check out the CSS, and you will see first the CSS Reset, and some extra goodies in there for styling and organizing the content within these elements, but most importantly to center the content you need one wrap (needs to be a class so you can use it over & over again) and then your ids/classes for your header/footer elements.

You may be wondering why I chose to float both the header and footer after giving each 100% width. I chose to do this because of how I styled the elements within them. For example, in the header I have two items: the logo and the text. I chose to float one item to the left and one to the right – typical placement for header items on most websites. If I DIDN’T float the header container you would not see the background because the floats inside of it would take the logo/text out of the flow of that element.

This same method works the same for HTML5 – but instead of using div‘s with id’s of #header and #footer, you can just use the <header> and <footer> elements!

Tomorrow, I will explain how to use this method to create a full width footer and anchor it to the bottom of the browser window!

Jump to Comments

59 Responses to How to: Create Full (100%) Width Header/Footer with Centered Content (Updated)

  1. […] a new version of this method that is even EASIER. If you would like to learn more please see How to: Create Full (100%) Width Header/Footer with Centered Content (Updated). This method is still valid and feel free to use it if you […]

  2. […] ago (yipe!) when I was working on one of the many redesigns of my site. Looking back on … Continue reading → CSSgirl Dev & […]

  3. […] I discussed another method of creating a full width header and footer while still keeping your interior content centered. I’m going to expand on this method, and show you how to take the full width footer […]

  4. Steve says:

    This is exactly what I was looking for except for one thing: The links in the header are not clickable in the example. Digging through it a bit and the wrap needs to clear:both as well. The header div was not expanding and the content of the header was overlapped by the content div.

    Hope that makes sense. If that’s the wrong solution, sorry for the trouble.

  5. Carlos says:

    many thanks for sharing this !!

  6. miguel says:

    Hi, I.ve been looking around the internet and i just can.t find the solution I need. Maybe you can help please. Im trying to build a very simple website and if i use tables, is easy. Im the old mind type and recently trying to catch up with wed dev using css.

    Basically the website is devided in four rows, each row being full 100% width, so it goes from one margin to the other.
    in the first, second, and third row, I have three columns for each row.

    The fourth row is for footer only. How can I achieve this? please.

    Thank you.
    Miguel

  7. Miguel says:

    Thank you for sharing your method.
    How would you add another row (the 4th one), let say under the footer?

    Thank you!

  8. Ramon says:

    Thank You Very Much!

  9. Sajir says:

    Thank You………..

  10. alukin says:

    Hello! Thanks for your articles.

    I trying to make centred footer and header on my site and I found some problem with 100% width.

    Problem is when browser viewport lower then window width, it looks like the following:

    http://postimage.org/image/v0y3q8o4/

    It’s a screen from old demo but it behaves the same on this version too.

    Do you know is it possible to fix this without javascript? I’m interesting in this version, not fixed(which works fine)

  11. chrix says:

    This is very effective.. and smart! I love this solution.. so NEAT!

  12. Steve Aquino says:

    Hey there, I just discovered a way to have a container expand to fill floated children within. Instead of floating the header and footer, you can apply overflow: auto; I prefer this method because it is more explicit with what we’re trying to achieve, and avoid any weird and undesired float behavior.

  13. Eric says:

    I ran across your website looking for a fix for the same problem that alukin mentions in the comments. Have you happened to solve this problem for when the viewport is smaller than the content?

    Cheers

  14. Yo says:

    Nice and all, but it does NOT work. When you click on your demo, make the window smaller, so you’ll have to do a horizontal scroll, you’ll see that the “100%” does NOT fill the webpage, but only the part that was visible before scrolling…

  15. Lindsey says:

    OK, I just want everyone to know I’m working on the various bugs mentioned by some of the readers above. I also found another bug where if you zoom in the header isn’t retaining its full width in some instances. As soon as I have a solution I will be explaining how to fix!

  16. […] 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 […]

  17. billy says:

    Thank you so much… such a great help!
    Best,
    Billy

  18. Kim Black says:

    Hi Lindsey,

    Hope that you are well. I have a question. Not sure it’s about CSS, but maybe you can point me in the right direction.

    On the Web test page, we have a main menu with drop-downs. In the future, we will probably need to make updates to the menus beyond how they look (that is, font, color). For example, renaming links, restructuring the menus, deleting some links, adding new ones, etc., along with style changes (different font, color, etc.).

    Is there a way to do this globally without having to do this on each page?

    I’ve seen how CSS code works globally for style updates (font, color), but not for content & restructuring.

    Thanks again!
    Kim

  19. Lindsey says:

    Hey Kim!

    There are two options that would work for you. One would be integrating your design with a CMS (like WordPress, my favorite) which would do several things for you – most of your template files would be controlled by one global template. For example each part of your template (header, footer, sidebar and then the content for each page) would be saved into one file for each section. Then all you would need to do is enter your content into the WordPress backend and WordPress would format and output the content for you within the theme files.

    The other thing you can do, if you don’t want to work with a full-fledges CMS is to use PHP includes (assuming your host has PHP available). Here’s a really simple explanation of how they work. Build Internet also has a pretty good tutorial on the subject.

    Hope that helps :)

  20. Mohamad says:

    Thank you for this. I have been looking for this for a very long time. =)

    Keep up the good work!

  21. Fil says:

    Thanks a lot Lindsey! Been trying to get this to work for hours and finally found your solution, worked like a charm!

  22. Ivan says:

    Thank for the great tutorial, is it possible to use this css style template for personal/commercial use?

    Thanks!

  23. Biomech says:

    Awesome article, really helped. Only problem is my body {} background won’t display anything – or in the content ID either. The syntax is right and the image is there, but nothing shows on the layout. Any ideas?

  24. Vany says:

    Hello,
    thanks a lot for this tutorial.
    I’m beginner of webdev.
    so it’s can help me to solve my problem :)

  25. Joniann says:

    Can you give me css code with header, top nav ,left nav, main,and footer coz the layout that i did exploded everytime i minimize it

  26. Joniann says:

    i’m so confuse in fixing it =( my footer should be the same width and height of my footer while my left nav has a width of 170

  27. wajid says:

    Nice one i like that good article

  28. albert says:

    Great! That was the simple solution I was looking for.

    One suggestion: I would use ‘overflow’ instead of ‘float’ for the containers.

    http://www.quirksmode.org/css/clearing.html

    (or the good old clearfix: http://nicolasgallagher.com/micro-clearfix-hack/)

    Thanks :)

  29. Syed Faiz Raza says:

    Hi Lindsey,

    I am using a 23″ Widescreen monitor. And When I tried the Width 100% property to script, it just doesn’t work. I can manually fix the issue by assigning -10px to padding and margin and this solves the problem but the same file when used on a 15.4″ screen shows a different result. Please advice.

  30. Umesh says:

    my websites mismatch in zoom out and zoom in,plz tell me the reason

  31. Adnan says:

    Hi,
    your tutorial helped me lot. But I have a website with footer of 100% width. I want to decrease the width with central alignment. I could decrease the width but could not align it centrally with the body. Can you please help me to sort this out.
    Thanks.

  32. Serge says:

    Hallo!
    When i zoom in this page several times, i have a horizontal scroll and when i move the scroll to the right side i see that moves to the left side. I mean it doesn’t have width=100%.
    Why?

  33. MiB says:

    While this method works kinda it has an ugly side-effect:
    When you have content with min-width and make the browser window more narrow and get a horizontal window scroll and move the viewport to the right then the background color is not behind the part of the header that before scrolling was outside the viewport. As far as I can tell this is so in every browser.

    Min-widths on columns is very reasonable to have as text in too narrow columns can’t be read properly.

  34. MiB says:

    One solution to this horizontal scrolling issue that I mentioned previously is to assign a min-width to the html element in order to give the full width elements, the header and footer in the demo, a specific measurement to have 100% of, and that which is not the viewport width of the browser (as this issue appears when it is more narrow than the content).

    On your demo page I assigned

    html {
    min-width:900px;
    }
    </code

    Percentages doesn't work of course in this case as that would be based on the viewport. What length unit you do use should probably be based what the content elements use.
    I did try with ems in the demo, but that didn't work as well.

  35. khrao says:

    The tutorial is very impressive

    Thanks,

    http://www.eblogresources.com/

  36. Steve D says:

    Thank you for this entry. It is beautiful. It worked perfectly in my project site I am working on. :-)

  37. Maria says:

    its not working :(

  38. Shamim says:

    Excellent tricks….thanks so much

  39. MaximumPC says:

    I have been looking for this for a long time, thanks man

  40. test website says:

    Hi there, You have done an incredible job. I will definitely digg it and personally suggest to my friends. I’m sure they will be benefited from this site.

  41. Jon says:

    Don’t really like it, if you resize the window until the horizontal scroll appears and you scroll to the right, you’ll notice it takes the window’s size of the browser, but the content gets way further…

  42. Thank you for this stuff, i was apllied for my site and placed image background with this style
    i used free Viper theme for ecommerce from Topwptheme

    #header, #footer {
    background:#fff url(images/image.jpg) repeat;

    width:100%;
    float:left;
    }
    here example http://pondokhijab.com

  43. Eko Darmawan says:

    Thank you…This is nice tutorial…!! Now I have template with full width Header and Footer.

  44. ivan de Simone says:

    I love you and your way to share

  45. sharjah uae says:

    Do I need to change the div’s also in the index.php file?

  46. با سلام و خسته نباشید خیلی عالی بود ، کار منو راه انداخت.
    Hi ,thank you i am from iran. it was very good and help me full:)

  47. hwagong says:

    thank you. very much. ^느^

  48. Good Tutorial. Little more (content was on top “under” the head section…
    index.html:

    Insert title here

    Other content for your header

    left side
    content
    breakside content2

    This would be your footer content!

    the CSS:

    .wrap {
    position: relative;
    margin: 0 auto;
    /*replace 900px with your width*/
    width: 900px;
    }

    #header,#footer {
    width: 100%;
    float: left;
    background-color: grey;
    }

    #content {
    clear: both;
    position: relative;
    margin-left : auto;
    margin-right: auto;
    width: 400px;
    background-color: yellow;
    border: solid;
    margin-left: auto;
    }

    #left {
    position: absolute;
    width: 150px;
    top: 0px;
    left: 0px;
    }

    #innercontent {
    position: relative;
    width : 150px;
    top: 0px;
    left: 150px;
    width: 150px;
    }

  49. wrong style for html…. here the right:

    Insert title here

    Other content for your header

    left side
    content
    breakside content2

    This would be your footer content!

Leave a Reply

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