Create Full Width Header & Footer With Centered Content Using CSS

Jun
7

28 Comments - LEAVE A COMMENT

Update #2 1/15/2012I have update this version once again, please see the latest release of 100% Full Width Header & Footer with Centered Content.

Update!: I’ve published 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 like.

There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.

So the simple way to do this is as follows:

HTML:

<!-- background for expandable header -->
<div id="headerbg">
<h1>YOUR TEXT</h1>
</div>

<!-- CENTER CONTENT -->
<div id="container">

<div class="left">
	<p>This is content that goes on the left!</p>
</div>

<div class="right">
	<p>Here is my right column!</p>
</div>
  
</div>
	<!--CLEAR FOOTER TO PREVENT BUNCHING-->
	<div class="clear"></div>
<div id="footer"><p>HEY HERE IS MY FULL WIDTH FOOTER</p></div>

Simple right? And here is the CSS:


/*Simple CSS reset for items we will use JUST for this example. 
Please use full reset when designing! 
Reseting the margin and padding is important for the body tag so the 
header and footer will hug the whole screen.*/

h1, p, body, html {
	margin:0;
	padding:0;}

/*Just visual styles*/
body {
	background:#000;
	font:12px verdana, sans-serif;
	color:#000;
	}

/*Our full length header. 
We align the text center so it shows up in the middle. 
If you prefer you could right or left align it.*/	
#headerbg {
	background:#cccc66;
	text-align:center;
	padding:20px;
	}
	
/*Center Content*/	
#container {
	position:relative;
	margin:0 auto;
	width:800px;
	}

/*Full width footer*/	
#footer {
	background:#cccc66;
	padding:10px;
	text-align:center;
	}

/*These are just styles used for the example for the content.*/	
.left {
	float:left;
	width:500px;
	background:#ccff66;
	}
	
.right {
	float:left;
	width:200px;
	clear:right;
	background:#66ff33;
	}
	
.left p, .right p {
	padding:10px;
	}
	
/*If you are going to use floats then you will NEED to clear the 
footer so it doesn't bunch the content up*/
.clear {clear:both;}

See Example

But wait, theres more. Often I have several things going on in my header, like a logo, and some links. I’ve actually used this on the redesigned CSSgirl, and right now you all are going to get a sneak peek of the homepage of the design in static format so I can illustrate this.

It’s basically the same as the above example except two critical things:

1. In our HTML the header is going to be an empty div. You will need also to define a height for your background.
2. We will use a negative top margin to pull the centered content on top of the full width header.

This is a really easy way to use patterned/repeated background patterns in your header that expand the entire width of the site.

So, here is how those things will change:

/*Our full length header. */	
#headerbg {
	background:#cccc66;
	height:90px;
	}
	
/*Center Content*/
#container {
	position:relative;
	margin:0 auto;
	width:800px;
	margin-top:-90px;
	}

Now you can position and float things ON TOP of the full length header.

See the main page of the all new CSSgirl in static HTML format for examples (full length header and footer). (And no this isn’t the 100% final version :)

Update!: I’ve published 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).

Jump to Comments

Tagged | , ,

28 Responses to Create Full Width Header & Footer With Centered Content Using CSS

  1. Ben Reimers says:

    How does this method work in IE? From my experience using the margin: 0 auto; method does not centre the content in IE (6 and lower) — not sure about IE7.

    The workaround I use is to set text-align: center; on the body tag, and then then text-align: left; to div tags immediately after.

  2. Lindsey says:

    Hey Ben,

    I use the method on 98% of centered fixed width layouts and have no troubles with IE6 or IE7 with leaving out the text-align:center;. I think that text-align:center was a failsafe method for versions of IE5 and lower.

    I’m not sure what other positioning methods you are using inside your container div, but mostly I use floats, with some absolute positioning combined and I’ve never encountered a problem with IE6/7 keeping the content centered. (Thankfully!)

    Check out the two examples in versions of IE6/7, FF2/3, Safari for Windows and Opera.

    I don’t provide any support for IE versions less then 6 unless it is specifically asked for by a client.

  3. Ben Reimers says:

    The new design looks fine in IE6 to me. Previous to now I’d not been able to test in Windows (I’m on a Mac) but I’ve recently set up a virtual machine and found that IE it broke my latest website which did use that method, and I read on another site that it didn’t work accurately (or all the time) in IE.

    Looks like I have some testing to do to see what methods I’m using that might be breaking it in IE.

  4. Lindsey says:

    Hmm, that is interesting. If you want the one that was breaking in IE – I could take a look at and let you know what exactly might have caused it to break.

  5. […] Create Full Width Header & Footer With Centered Content Using CSS […]

  6. […] So the simple way to do this is as follows: (more…) […]

  7. brian says:

    This doesn’t work well. Try reducing the width of your browser window to less than the width of your content and then scroll horizontally. You’ll see that the header and footer only expand to the width of the browser window and not of the content.

  8. Lindsey says:

    Actually the header and footer will stay the width you define them in your CSS, but the background image with shrink and grow with it.

    So it works the way it should. The header and footer stay the same width of the container div to center the content (and the header and footer.

    The point was to have the top images expand to the width of the screen. If you content should be wider than the smallest size you define for the container/header/footer than yes of course it won’t size down.

  9. ???? ???? says:

    Another nice methods for CSS, my only worry when i deal with css is to make the site looks the same in firefox and internet explorer.

  10. Mindfreek says:

    Very Nice! Helped me a lot!!

  11. Dark says:

    Im trying to expand my footer to 100%, basically the entire width of the screen. Its currently 100% of the main content area, but I would like to expand my footer background across the entire width. It can be seen here:

    http://www.tonerdigital.com/wordpress

    Its has worked, although Im now getting a scroll bar at the bottom of the browser. The footer DIV’s width is 100%.
    Thanks!
    scfind@gmail.com

  12. Lindsey says:

    Dark – did you ever find the solution to your problem?

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

  14. 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
    then in the first, second, and third row, I have three columns.
    the fourth row is for footer only.
    How can I achieve this? please.

    Thank you.

  15. Erik says:

    Hmmm im a newbie to web design and this didnt work for me :( All i got was the text… help?

  16. Erik says:

    Hmmm im a newbie to web design and this didnt work for me :( All i got was the text… help? please respond to my email: minecraftguy96@gmail.com. thanks!

  17. Willem says:

    Hi

    Great . Thanks for the help.

  18. Hi, This method works very well for me. I have one issue that I haven’t been able to solve.
    I have a full width header with the content restricted to the center. I have a menu (ul) inside my
    header where the background color extends to the edges. Unfortunately the ul starts all the way on the left. I want the ul to be restricted to the center. Any ideas? Thank you.

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

  20. Lindsey says:

    @Steve Greenbaum – Without seeing exactly what you are talking about I can only assume the following. You have the 100% width header and a <ul> inside the 100% width header. But, instead of being centered it’s left aligned?

    It sounds to me that you are missing some sort of container <div> to center your content. So inside your full width header you will need add this div (ex:


    <div class="wrapper">
    <ul>
    </div>

    and then the following code in your CSS:


    .wrapper {
    width:950px;
    margin:0 auto;
    }

    Where the width would equal the amount of space you want that item to take up. I choose to use this as a class, so I can repeat it in other sections, like the main content area, and footer.

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

  22. Jhon Buttler says:

    To improve the look of my header I choose to add a background with a simple graphical element: visit our site

    http://www.handycss.com/how/how-to-create-a-header-with-css/

  23. I am want to make good web sote for me

  24. Rudi says:

    Thank you very much (mommy) :)
    Finally I can made my footer full width, GBU.

  25. Kofi says:

    Thanks a hundred times for your help and generousity. I spent two days researching the subject matter but in five minutes you helped solve my problem.God bless.

  26. Tom says:

    Hi Lindsey i got a question how do i make this go center

    #header {height:352px;width:125px;background:url(images/header.gif);background-repeat:no-repeat}

    Please help me

  27. Ririn says:

    Thank Kisih, good post

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>