Create Full Width Header & Footer With Centered Content Using CSS
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 :)
Trackback
Comments
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.
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.
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.
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.
[...] Create Full Width Header & Footer With Centered Content Using CSS [...]
[...] So the simple way to do this is as follows: (more…) [...]
Здорово!
nice blog.
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.
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.
Beautiful! :-)
