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

May
28

56 Comments - LEAVE A COMMENT

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

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

  1. MiB says:

    At this point of time this old method and most older ones have been superseded by responsive design techniques that serves mobile as well as computer platforms. If you’re not doing responsive design now or very soon, you’re bound to face the fate of the dodo.

    Get into it now if you’re not already: Marcottes “Responsive Web Design” and Tim Kadlecs “Implementing Responsive Design” are two great introduction books and alistapart.com is as relevant as ever.

  2. James says:

    Thanks. Your explanation is simple and straight to the point!

  3. Lindsey says:

    @MiB – the publish date of the post is from May of 2011. Of course the method is outdated and everyone should definitely be investing their time in learning new methods and responsifying their efforts. If I had the time I would once again update my method to share with everyone :)

  4. Lindsey says:

    It does still work though, for those wondering – the point is there is probably a better way to do it, which one day I’ll find the time to write!

  5. Encom Server says:

    Nice site. but a problem occurs when I zoom in on the page

    This : http://1drv.ms/1kRlfwI

    How to solve this problem? Help!

  6. raju says:

    hoe to create one image within image

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>