How can I create a page whose header & footer have their width span the entire browser window yet without causing the scrollbar to appear below browser window? I want the page to be fixed width too? I’m inspired by http://news.cnet.com/ (…& of course many other sites).
What amazed me was also the fact that if i tried to resize the window everything seem to maintain their position (…at least most of the objects).
Ideas please… cheers
Hi,
The trick to that is to set the header and footer outside of your main wrapping div. Then layer the header above the wrapper with z-index.
Here is an example that does what you are wanting. It also has a sticky footer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Full Width Header & Footer</title>
<style type="text/css">
h1,h2,h3,h4,h5 {
margin:0;
padding:10px 10px 0;
text-align:center;
}
p {margin:10px;}
body {
background:#E8E8F4;
font:100% arial,"trebuchet ms",tahoma;
margin:0;
padding:0;
}
html,body{
height:100%;
}
/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix (Maleika)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
}
#wrapper:after, /* #wrapper:after for IE8 min-height:100% Fix*/
#content:after { /* #content:after for Float Containment*/
clear:both;
content:"";
display:block;
height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/
font-size:0;
}
#header {
width:100%;
min-width:800px;
height:99px;/*100px with border*/
position:relative;
z-index:1; /*lay it on top the main wrapper*/
border-bottom:1px solid #000;
background:#959595;
}
* html #wrapper{height:100%;} /* is "min-height" in IE6 */
#wrapper {
width:800px;
margin:0 auto;
margin-top:-100px; /* now pull it back up under header*/
min-height:100%;
background: #CCC;
border-left:1px solid #000;
border-right:1px solid #000;
}
#content {
padding:100px 0 60px; /*set a top and bottom padding to preserve the header and footer */
width:100%;/*haslayout*/
}
#footer {
margin:-60px auto 0; /* a negative top margin pulls the footer up into viewport*/
width:100%;
min-width:800px;
height:59px;
border-top:1px solid #000;
background:#959595;
}
</style>
</head>
<body>
<div id="header">
<h2>Full Width Header & Footer<br> with Sticky Footer</h2>
</div>
<div id="wrapper">
<div id="content">
<h2>Page Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
adipiscing mauris, a nonummy diam ligula ut risus.</p>
</div>
</div>
<div id="footer">
<h5>Footer Stuff</h5>
</div>
</body>
</html>
my goodness thats just it!! But man, some of those hacks are beyond my comprehension. I’ll just take it one step at a time! many many thanks
Hi,
Actually there was only one hack in the entire code, and a valid one at that. It is the * html hack for IE6, since that browser treats height as if it were min-height.
There are some psedo classes in there that are min-height:100%; bug fixes for IE8 and Opera. The layout uses a lot of negative margins too but those are not hacks, negative margins are legitimate layout methods.
If it were not for the special attention needed for IE8 and Opera (excluding the IE6 hack also) the code could have been as simple as this -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Full Width Header & Footer</title>
<style type="text/css">
h2,p {
margin:0;
padding:10px 10px 0;
}
html,body{
height:100%;
margin:0;
padding:0;
}
#header {
width:100%;
min-width:800px;
height:99px;/*100px with border*/
position:relative;
z-index:1; /*lay it on top the main wrapper*/
border-bottom:1px solid #000;
background:#959595;
text-align:center;
}
#wrapper {
width:800px;
margin:-100px auto 0; /*pull it up under the header and center it*/
min-height:100%;
background: #CCC;
border-left:1px solid #000;
border-right:1px solid #000;
}
#content {
padding:100px 0 60px; /*set a top and bottom padding to preserve the header and footer */
width:100%;/*IE haslayout*/
}
#footer {
margin:-60px auto 0; /*a negative top margin pulls the footer up into viewport*/
width:100%;
min-width:800px;
height:59px;
border-top:1px solid #000;
background:#959595;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<h2>Full Width Header & Footer<br> with Sticky Footer</h2>
</div>
<div id="wrapper">
<div id="content">
<h2>Page Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
adipiscing mauris, a nonummy diam ligula ut risus.</p>
</div>
</div>
<div id="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
Now tell me some’… i thought z-index has to be applied to both wrapper & header and one with big z-index value sits on top. In this case; header z-index: 2 & wrapper z-index: 1, causing the header to sit on top of wrapper…?
Another thing: what’s with this sticky footer Idea? I thought footer is footer… will always be below?
…wanna know more about browser hacks too 
cheers
The faq explains how a sticky footer differs from a normal footer. If after reading that you are still not clear then ask questions here again 
…wanna know more about browser hacks too
cheers
No you don’t
Hacks are evil and should be avoided.
As Ray said there was only one hack in the page and that was the star selector hack. The rest is basic CSS (once you have learned it of course) although it can be daunting at first.
You should of course learn about “haslayout” which is covered in the CSS FAQ as it is a common cause of bugs in IE6 and 7.
Read the CSS FAQ sticky thread in full as all these basic issues are covered in there and you will learn nearly all you need to know.
In Rays code there is only a z-index on the header and therefore it will be stacked on top of any non positioned elements which include the wrapper.
Only positioned elements can have z-index applied (position:relative or position:absolute).
The higher the z-index means that the element will be on top. That means a z-index:2 will sit on top of a z-index:1.
Ultimately (as far as IE7 and under are concerned) it’s the parent element that dictates the stacking level of its children. (A child with a z-index of 1million will only overlap other elements outside the current context if the parent’s z-index is higher then the element you want to overlap.)
Mmm make sense about z-index.
But as far as cross-browser compatibility is concerned how do you keep pages consistent across browsers if hacks are ‘evil’… I have problems particularly with IE? And what does * html hack do then?
Will definitely read on sticky footers
Thanks a lot
ITenzo, I’m reading right along with you.
Paul, I’ve used the star hack in more than one design, when it’s necessary. But should it be incorporated in a design as a matter of course, as an IE6-only inclusion? I would think probably not (and my reading on PositionIsEverything, the MSDN blog, and other sources tend to support that conclusion), but why not?
If you don’t mind having hacks in your stylesheet then by all means have the IE6 code incorporated into your regular stylesheet. That’s what I do :).
You really only need hacks if there is no other way to cure the bug or if for some reason you absolutely need it
Yes older Ie is a problem especially IE6. IE7 isn’t too bad and needs relatively few fixes. IE8 is pretty good and rarely needs a fix.
For IE7 and under there are a number of known issues that cause 99% of the bugs and if you learn these you will find that you don’t have much left to do.
The main thing to understand is “haslayout” and if you ensure that elements that hold more than simple content (like text) are in haslayout mode (which can be done without using a hack) then 99% of ie’s problems disappear.
There are also some common bugs for ie6 such as the double margin bug on floats which is easily fixed using display:inline and again no hack is needed really.
The other issue is default margins and padding and you need to control this explicitly as they differ between browsers so never rely on a browsers default but supply your own. Again no hack is needed.
If you always build the above into your code you will find that you only get trapped by real bugs and not just browsers differences. I rarely see a bug these day sat all when I code a page because I always make sure that I have catered for these know problems already.
No real hacks are needed for the above problems but just coding in the correct way from the start is enough.
When you do need to fork the code for ie6 then the “* html” hack (star selector hack) is a means of supplying code to only ie6 and under. It is valid css but is a nonsense construct. The universal selector matches any element in that place but as html has no parent then the rule should not match anything but ie6 treats it as if you had just said “html”. Therefore it is 100% safe method to target ie6 and under although [URL=“http://reference.sitepoint.com/css/conditionalcomments”]conditional comments are perhaps neater.
Think less in terms of hacks but how can I change this to make all browsers happy without forking the code too much. Sometimes a change of approach will sidestep a bug and allow clan code to be used.
Of course there are times when you have to use a hack because it can’t be avoided but then you can tell yourself that at least you tried everything esle first.
Only use a hack when you are combating a known bug and don’t just use them (hacks) because you notice a difference. The difference is likely to be something that you haven’t done right in the first place. If the page still needs a hack then try and find out what the bug is that is causing the problem so that next time you will know the cause in advance and perhaps code around it.
I don’t see a problem with doing something like this:
.fixed{position:fixed}
* html .fixed {position:absolute}
Of course the clean way to do it is to use a conditional comment and put the hack in the CC. In that way you can simply delete the CC when IE6 is dead and buried and just leave your nice clean code.
Of course separating the hacks into another stylesheet makes maintenance harder because you need the other file open all the time to check whether the rule you have written has other rules in other places for other browsers. This is also exacerbated if you have a CC for each version of IE and then you now have to look in 4 different places and double check.
It all depends on how you like to code. I don’t really think there are rights or wrongs here as arguments for both approaches can be made.
Now, could you please explain a little more on “haslayout” mode… what do you really mean?
You’ll love these two links (the first is the most accurate but I first learned on the second, which has been recently re-done and may have removed some of their misinformation):
http://www.satzansatz.de/cssd/onhavinglayout.html ingo chao’s site explains what it is and what sets it off
http://haslayout.net/haslayout when I was new this site was easier for me at the time
To learn about quirks that haslayout causes you can just frequent this forum.
We eventually go over a fairly large chuck of every haslayout issue ;).
I’d be fascinated to see the build-ins you always incorporate into your designs, your “template fixes,” so to speak.
@Black, as your coding the CSS (this is what I do, I don’t know about Paul) I think about how all browsers will lay it out. I’m of course careful with measurements…that’s basic…but if I know that doing something could trip something up in IE6/7 I take care of it.
Just take it one step at a time. You will get the hang of it.
That’s just me though
I’d be fascinated to see the build-ins you always incorporate into your designs, your “template fixes,” so to speak.
It goes something like this train of thought.
Control all margins and padding on all the elements used.
Make sure that defaults are set correctly (especially for lists)
“What is this div going to contain”?
If it contains more than simple text and has borders and background colours then it must have a “layout”.
“is it the first,last or only float in sequence”?
If so add display:inline.
"does it have padding,borders and width"?
Do the box model hacks for Ie5.x (if client requires it)
“Is the element absolutely placed”?
Make sure it is at the end of the current stacking context and after the static content and if it is after floats then add clear:both to the absolute element also.
Is the element floated right in a left floating widthless container ?
Don’t do it that way as it will break in IE7 and under - change the design to workaround it.
“Are the elements sized in percentages”?
Allow breathing space for rounding errors.
Do elements like a menu fit exactly across the screen with little space for breathing?
Add white-space: nowrap or hide the overflow or use another design.
Can the page be sectioned into columns and rows nicely?
Do it
Is this div really necessary?
No - delete it.
Check it in half a dozen browsers at every code addition.
Validate html and CSS regularly while developing and not at the end.
Something like that
Thanks, Paul. I do most (not all) of these things in my general designing. I’m folding your post into a checksheet I’m putting together to keep me on the straight and narrow from the outset.