• Fixed Header & Footer Layout: A Beginner’s Guide

  • By: Jarod Taylor | Category: HTML & CSS

  • Having a fixed header and/or footer can be quite effective in a web interface where its use proves to be advantageous. However, getting it implemented in all browsers, including IE6, can seem quite daunting.

    In this tutorial we'll not only get it working in all the major browsers, but we'll also cover all the necessary steps required in doing so. By the end of this tutorial, you should be able to implement this into your own projects without having to copy and paste a thing.

    Get SourceView Demo
    Noobnote:

    Since the recent Firefox update (3.5), there's been a bug found in this layout. Firefox is not handling position: fixed quite right. You'll notice a flicker like effect when scrolling the fixed header and footer layout. Until Firefox fixes this permanently, you'll need to declare overflow: auto on both the header-wrap and footer-wrap. I'm not sure why this fixes it, but it does. Read more about the bug here.

    Introduction

    Creating a web layout with a fixed header and footer is quite easy in your modern browsers (Firefox, IE7/IE8, Opera, Safari, Chrome, etc). It's simply done by using the CSS property declaration position: fixed. Unfortunately, our favorite browser, IE6, does not support the fixed value, and treats it as if it were position: static which is far from the results that position: fixed achieves. We'd be better off if it treated it as position: absolute instead.

    Noobnote:

    You need not only worry about Internet Explorer 6 when using position: fixed but the same problems can occur in IE7 if it's in quirks mode. To learn more about quirks mode go here..

    Declaring the value fixed on the position property is closely related to its sister value, absolute. Like position: absolute, declaring the value fixed removes the element from the normal flow of the document and allows you to position it using the top, right, bottom, and left properties. The difference, when using position: fixed, is its position is actually in relation to the browsers viewport rather than its relative containing element. So, regardless if the page is scrollable, or not, the fixed element stays put.

    If you're not familiar, or comfortable, with the CSS position property. I suggest you become well versed in its differences. It can make or break a layout, literally. I would suggest visiting the following sites:

    Now that we got that out of the way, what do you say we get started creating this layout? Instead of just providing you with the HTML and CSS required to get our fixed header and footer working, I'm going to take you step by step through the process. Doing this will not only show you how it works, but it will also show you why it works. If you can know not only how its done, but also why it works, you'll easily remember what's required in order to implement a fixed header and footer, even in less than par browsers.

    Let's get started, but first let me go over the steps we're going to take.

    1. Create some basic content for our page
    2. Give our page a fixed header
    3. Get IE6 to behave by emulating position: fixed
    4. Give our page a fixed footer

    Depending on your experience, you can either follow the entire tutorial step by step, or you can skip to the section that requires your attention.

    Create files, folders, & structure

    tutorial image

    As always, I'm using the standard folder/directory structure that I typically use. Here is my folder structure:

    • Main Directory (root folder) > index.html
    • Main Directory (root folder) > images (folder)
    • Main Directory (root folder) > css (folder)
    • Main Directory (root folder) > css (folder) > main.css
    • Main Directory (root folder) > css (folder) > ie6.css

    You can either create the folders and files before hand or when they're needed. I will be referring to each file by its respected name. If you downloaded the source files, you'll notice I included a finished version and a starting point using the same structure I'm using. If you want to start from scratch you can download the header-bg.png and footer-bg.png files.

    Create some page content

    We need to get some basic content on our page before getting started with the fixed header and footer. In order for us to get the full effect of the fixed header and footer, we need enough content on the page to create browser scrolling. If you downloaded the source files, I started you off at this point, otherwise create some basic filler content for the page. If you have the source files go ahead and go into the "started" folder and open the index.html file in your browser. You should see exactly what I'm seeing here.

    Nothing special here, just some basic content for our page. I'm not going to cover any of the markup because it's pretty self explanatory and it's not pertinent to this tutorial.

    Now that we have some content, let's give this page a header!

    Our page needs a head

    Let's get the markup started for our header.

    First we're going to add a div (header-wrap) to our index.html file, just above our container div tag. Go ahead and open up your index.html file in your text-editor of choice, and include the header-wrap div tags just above the container div tag. I've highlighted the code you need to add to your file. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Header &amp; Footer: Cross Browser</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header-wrap"></div>
<div id="container">
	<div id="content">
		<h1>Sed ut perspiciatis unde&lt;&gt;</h1>
		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
		<h1>Lorem ipsum dolor sit amet</h1>
		<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus. Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut. Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae, blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.</p>

<p>Aenean aliquam erat neque. Mauris scelerisque vestibulum posuere. Praesent aliquet, quam vel fermentum posuere, leo felis varius magna, in pretium arcu mi vel ipsum. Sed porttitor venenatis tortor, semper pellentesque nisl placerat quis. Etiam ornare turpis id massa consectetur vestibulum. Pellentesque vitae suscipit lectus. Pellentesque in nisi eget velit scelerisque placerat a vitae ipsum. Mauris eu diam tortor, at blandit felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum volutpat pulvinar. Etiam congue risus ut turpis dictum nec dictum ligula porta. Nulla sit amet ipsum at ligula vulputate imperdiet. Nulla posuere, justo commodo mattis hendrerit, leo dolor auctor ligula, sed accumsan tellus ligula eu eros. Fusce pulvinar risus sed sapien facilisis at scelerisque risus bibendum. Quisque orci quam, porta sed ultrices vitae, faucibus sed mauris.  </p>

<p>Cras turpis nisi, condimentum nec convallis at, lacinia sit amet diam. Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis. Suspendisse nisl lectus, porta ac tempor vel, gravida et mi. Cras tristique nisl at dolor adipiscing fermentum. Curabitur vitae lacinia quam. Phasellus urna sem, condimentum ut sagittis sed, dictum at lacus. Pellentesque felis turpis, interdum a adipiscing id, ornare eget ipsum. Aenean scelerisque diam sed orci lacinia rutrum dictum nisl congue. Curabitur vitae nunc velit, a pulvinar magna. Etiam venenatis placerat justo, sed rhoncus lectus venenatis at. Ut sagittis diam eu libero volutpat tempor. Phasellus non quam orci, malesuada volutpat eros. Suspendisse malesuada bibendum aliquet. Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh. Vivamus dignissim, sapien mollis eleifend tempor, tellus nulla ultrices velit, at tincidunt ligula sapien sed metus.</p>
	</div>
	<div id="sidebar">
		<h2>Sed ut perspiciatis</h2>
		<p>Nulla vehicula accumsan tincidunt. Nullam fermentum mi sit amet mauris viverra eleifend.</p>
		<blockquote>
			<p>Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh.</p>
		</blockquote>
		<p>Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis.</p>
		<h2>Nemo enim ipsam?</h2>
		<p>Mauris pellentesque imperdiet gravida. Duis lobortis ornare auctor. Nulla vehicula accumsan tincidunt.</p>
		<ol>
			<li>Excepteur sint occaecat</li>
			<li>Excepteur sint occaecat</li>
			<li>Excepteur sint occaecat</li>
			<li>Excepteur sint occaecat</li>
			<li>Excepteur sint occaecat</li>
		</ol>
		<p>Donec quam magna, dignissim nec elementum sed, iaculis sed libero.</p>

		<ul>
			<li>Curabitur tempus tincidunt</li>
			<li>Curabitur tempus tincidunt</li>
			<li>Curabitur tempus tincidunt</li>
			<li>Curabitur tempus tincidunt</li>
			<li>Curabitur tempus tincidunt</li>
		</ul>
		<p>Vehicula, risus in suscipit aliquet, tellus diam elementum ante, quis interdum massa dolor a leo. </p>
	</div>
</div><!--END CONTAINER-->
</body>
</html>

    Now open up your main.css file and include the header-wrap styles right inbetween the blockquote and #container styles. Again, I've highlighted the CSS you're adding.

    body {
	font: 62.5% Arial, Helvetica, sans-serif;
	color: #597347;
	margin: 0;
	padding: 0;
	background: #beffbf;
}

h1, h2 {
	color: #87ac6d;
	font-family: Tahoma, Arial, Geneva, sans-serif;
	margin: 20px 0 10px;
}

h1 {
	font-size: 2.5em;
}

p {
	margin: 10px 0;
	padding: 0;
}

blockquote {
	font-style: italic;
}

#header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90px;
	background: url(../images/header-bg.png) repeat-x left bottom;
}

#container {
	width: 940px;
	margin: 0 auto;
	font-size: 1.4em;
	overflow: auto;
	padding-top: 90px;
}

#content {
	float: left;
	width: 625px;
}

#sidebar {
	float: right;
	width: 275px;
	margin-top: 10px;
}

    What we've done is created a div container that is separate from the rest of our content. If you look at the original content markup we started with, the <div id="container"> has styles including a width of 940px and margin declarations of auto on the right and left properties. As we all know, this will cause block elements to center horizontally. If we put our header-wrap div inside of the container div, our header-wrap's width would only be 100% of its containing element (<div id="container">) which is only 940px, not 100% of the browser window's width.

    tutorial image

    If you take a look at what we have now; you'll notice one little problem - our content is hiding behind our header. In order to fix this, we simply need to add some padding to our container div.

    #container {
	width: 940px;
	margin: 0 auto;
	font-size: 1.4em;
	overflow: auto;
	padding-top: 90px;
}

    By adding a top padding of 90px (the same as our header-wrap height) we've pushed our page content below our header. You should now see some breathing room between our page content and the fixed header.

    There you have it! It's that simple to implement a fixed header in modern browsers. We obviously don't have any content in our header right now, but that's all that's required to apply a fixed header to a layout. I wanted my header content to be centered with the rest of page content, so I added another div and some basic styles to give our header some basic content. While it's not important or directly related to implementing a fixed header, I'll provide you with the header markup and CSS I used for this demo.

    HTML

    I've highlighted the additional HTML markup you need.

    <div id="header-wrap">
	<div id="header">
		<h1>Fixed Header &amp; Footer<em>even IE6 behaves</em></h1>
		<ul>
			<li><a href="http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/">Home</a></li>
			<li><a href="http://www.noobcube.com/about">About</a></li>
			<li><a href="http://www.noobcube.com/tutorials">Tutorials</a></li>
			<li><a href="http://www.noobcube.com/resources">Resources</a></li>
			<li><a href="http://www.noobcube.com/contact">Contact Us</a></li>
		</ul>
	</div>
</div>
    CSS

    Add the following styles below the #header-wrap styles. 

    #header {
	width: 940px;
	margin: 0 auto;
	position: relative;
}

#header h1 {
	color: #beffbf;
	text-align: right;
	width: 290px;
	margin: 0;
	position: absolute;
	left: 0;
	top: 20px;
}

#header h1 em{
	color: #90b874;
	font-size: small;
	display: block;
}

#header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 35px;
	right: 0;
}

#header ul li {
	float: left;
	margin-right: 5px;
}

#header ul li a{
	color: #90b874;
	font-weight: bold;
	font-size: 1.4em;
	margin-right: 5px;
	text-decoration: none;
}

#header ul li a:hover {
	color: #beffbf;
}

    You should now have a fully functioning fixed header. This will render correctly in all your major browsers including IE7/IE8, Firefox, Opera, Safari, and Google Chrome. In IE6, however, the header-wrap's position value of fixed is ignored and treated as position: static. This causes the header to just scroll with the rest of the content. Not only that, but the container div's padding is not ignored, therefore it's just sitting 90px below the header-wrap. That's just what we're going to fix next.

    IE6 can be a Poserition: Fixed

    There is absolutely no way to get IE6 to recognize position: fixed. There are a few techniques used in javascript to somewhat emulate position:fixed but, personally, I do not like the results. Not to mention, I'd prefer to implement it without the dependence on javascript.

    In order for us to emulate the same results position:fixed provides, we have to think outside the box. First of all, if IE6 is treating our header-wrap as having position: static - then it's also not recognizing our top and left property declarations, either. If you changed the top property value from 0, to say 200px, you'll notice the header-wrap in all the modern browsers will move down the page 200px, but in IE6, it'll ignore your changes. This is because the top, right, bottom, and left properties only work when your position property value is declared as absolute, relative, or fixed. If IE6 is treating our position value of fixed as if it were static then it will also ignore our top and left values as well. Let's see what happens if we change the position declaration from fixed to absolute in the IE6.css only.

    Open up your ie6.css file and add the following styles to your file.

    #header-wrap {
	position: absolute;
}

    Now, open up your main.css file and change the top value from 0 to 200px. I've highlighted the change.

    #header-wrap {
	position: fixed;
	top: 200px;
	left: 0;
	width: 100%;
	height: 90px;
	background: url(../images/header-bg.png) repeat-x left bottom;
}

    Save your ie6.css and main.css files, then view your index.html in IE6 and a modern browser like Firefox, IE7, Safari, Opera, or Chrome. You'll immediately see the difference, when you scroll the page.

    Now that the position property has been declared absolute in IE6, it recognizes our top value of 200px. The value of 200px was arbitrarily used to demonstrate how position: absolute differs from position: fixed. The difference between the two position declarations, absolute and fixed, is position: absolute will position its element in relation to its containing element. In this particular case, header-wrap's containing element is the <body> element. The body element in an HTML document is the containing element of all the content in a given web page. So, if your content stretches to 1200px, then, in essence, your body's height is 1200px as well (even if it hasn't been declared in a style sheet), and when you scroll the page, the header-wrap element will scroll with the body.

    The difference with the modern browsers position: fixed declaration is the position is in relation to the browser's viewport, rather than its containing element. The browser's viewport is the window in the browser through which the the web document can be viewed. Let's take a look here.

    tutorial image

    In the image above, our browser's viewport size is 1200 x 700px. The blue box has a fixed position of top: 200px and right: 50px. If we were to scroll this page, the box would stay in that exact positioin within the browser's viewport, where as, if the position was declared absolute, it would scroll with the rest of the content.

    So, why is understanding this important?

    Well, we need to get the header-wrap back to to the top of the page by changing the top: 200px back to top: 0 to start with. Go ahead and change that in your main.css file now. This will put the header-wrap back up to the top of the page.

    Let's get back to thinking outside the box for a minute here. If, in IE6, our page content is scrolling with the body, what if we wrapped everything but the header-wrap in a container div, gave it 100% width, 100% height, and set its overflow property value to auto? It would emulate the body element because its height and width properties are declared at 100%. That would be 100% of the browser window! Let's give it a shot.

    First of all, in order for our HTML elements to recognize 100% height, it has to know what its 100% height is in relation to. Well, the highest containing element on a web page is what? The html and body elements! So we need to first give our body and html elements a height of 100% in order for our other HTML elements to understand the height declaration of 100%. So let's open up the ie6.css file and add our our new styles.

    Your ie6.css file should now have the following styles in it.

    html, body{
	height: 100%;
}

#header-wrap {
	position: absolute;
}

    Now that we've declared our body and html heights as 100%, we can create our new container div. What we want to do is wrap all of our content, except the header-wrap in a new div with the following styles added to your ie6.css (again, I've highlighted the additions).

    html, body{
	height: 100%;
}

#header-wrap {
	position: absolute;
}

#ie6-container-wrap {
	width: 100%;
	height: 100%;
	overflow: auto;
}

    Giving #ie6-container-wrap an overflow value of auto with height and width declarations of 100% will cause the element to have scrollbars if its content exceeds its dimensions.

    tutorial image

    Go ahead and add the <div id="ie6-container-wrap"> tags to our index.html file.

    <body>
<div id="header-wrap">
	<div id="header">
		<h1>Fixed Header &amp; Footer<em>even IE6 behaves</em></h1>
		<ul>
			<li><a href="http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/">Home</a></li>
			<li><a href="http://www.noobcube.com/about">About</a></li>
			<li><a href="http://www.noobcube.com/tutorials">Tutorials</a></li>
			<li><a href="http://www.noobcube.com/resources">Resources</a></li>
			<li><a href="http://www.noobcube.com/contact">Contact Us</a></li>
		</ul>
	</div>
</div>
<div id="ie6-container-wrap">
	<div id="container">
		<div id="content">
			<h1>Sed ut perspiciatis unde</h1>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			<h1>Lorem ipsum dolor sit amet</h1>
			<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus. Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut. Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae, blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.</p>

			<p>Aenean aliquam erat neque. Mauris scelerisque vestibulum posuere. Praesent aliquet, quam vel fermentum posuere, leo felis varius magna, in pretium arcu mi vel ipsum. Sed porttitor venenatis tortor, semper pellentesque nisl placerat quis. Etiam ornare turpis id massa consectetur vestibulum. Pellentesque vitae suscipit lectus. Pellentesque in nisi eget velit scelerisque placerat a vitae ipsum. Mauris eu diam tortor, at blandit felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum volutpat pulvinar. Etiam congue risus ut turpis dictum nec dictum ligula porta. Nulla sit amet ipsum at ligula vulputate imperdiet. Nulla posuere, justo commodo mattis hendrerit, leo dolor auctor ligula, sed accumsan tellus ligula eu eros. Fusce pulvinar risus sed sapien facilisis at scelerisque risus bibendum. Quisque orci quam, porta sed ultrices vitae, faucibus sed mauris.  </p>

			<p>Cras turpis nisi, condimentum nec convallis at, lacinia sit amet diam. Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis. Suspendisse nisl lectus, porta ac tempor vel, gravida et mi. Cras tristique nisl at dolor adipiscing fermentum. Curabitur vitae lacinia quam. Phasellus urna sem, condimentum ut sagittis sed, dictum at lacus. Pellentesque felis turpis, interdum a adipiscing id, ornare eget ipsum. Aenean scelerisque diam sed orci lacinia rutrum dictum nisl congue. Curabitur vitae nunc velit, a pulvinar magna. Etiam venenatis placerat justo, sed rhoncus lectus venenatis at. Ut sagittis diam eu libero volutpat tempor. Phasellus non quam orci, malesuada volutpat eros. Suspendisse malesuada bibendum aliquet. Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh. Vivamus dignissim, sapien mollis eleifend tempor, tellus nulla ultrices velit, at tincidunt ligula sapien sed metus.</p>
		</div>
		<div id="sidebar">
			<h2>Sed ut perspiciatis</h2>
			<p>Nulla vehicula accumsan tincidunt. Nullam fermentum mi sit amet mauris viverra eleifend.</p>
			<blockquote>
				<p>Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh.</p>
			</blockquote>
			<p>Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis.</p>
			<h2>Nemo enim ipsam?</h2>
			<p>Mauris pellentesque imperdiet gravida. Duis lobortis ornare auctor. Nulla vehicula accumsan tincidunt.</p>
			<ol>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
			</ol>
			<p>Donec quam magna, dignissim nec elementum sed, iaculis sed libero.</p>

			<ul>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
			</ul>
			<p>Vehicula, risus in suscipit aliquet, tellus diam elementum ante, quis interdum massa dolor a leo. </p>
		</div>
	</div>
</div><!--end ie6-container-wrap-->
</body>

    Take a look at what we have now, by opening it up in IE6.

    It's close! Our page is scrolling and our main content is scrolling behind our header-wrap like we want, but you'll also notice that our header-wrap is obscuring our scrollbar for one, but we've also got 2 scrollbars on the right side of our browser window. We'll fix the double scrollbars first.

    The scrollbar on the left is the scrollbar from our ie6-container-wrap, and the scrollbar on the right is our browser's scrollbar. We no longer need our browser's scrollbar so let's remove it. To remove the browser's scrollbar, we need to set its overflow property to hidden. Add the new style declaration to your ie6.css file.

    html, body{
	height: 100%;
	overflow: hidden;
}

#header-wrap {
	position: absolute;
}

#ie6-container-wrap {
	width: 100%;
	height: 100%;
	overflow: auto;
}

    If you take a look at our page now in IE6, you'll see the scrollbar is now gone, leaving us with just one scroll bar. The only problem with our layout now is the header-wrap is obscuring our scrollbar. This is because our header-wrap has a position value of absolute and a width of 100%. This is 100% in relation to its containing element. The header-wrap's containing element is the body element. In this case, our body element's width is the entire width of our browser's viewport. Not only that, but our header-wrap element also has a higher z-index than the ie6-container-wrap does, simply because its hierarchy in the HTML document. Unfortunately, it's not as easy as adding a higher z-index value to the ie6-container-wrap because this would cause the ie6-container-wrap's content to scroll on top of our header-wrap, which is not what we are wanting.

    What we need to do is create another container div inside our header-wrap div and move our background style declarations to it. This way we can put a right margin on it and move the div that holds the background image to the right of our scrollbar.

    tutorial image

    Let's go ahead and add our new div tags to our index.html file. As always, I've highlighted the additions.

    <div id="header-wrap">
	<div id="header-container">
		<div id="header">
			<h1>Fixed Header &amp; Footer<em>even IE6 behaves</em></h1>
			<ul>
				<li><a href="http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/">Home</a></li>
				<li><a href="http://www.noobcube.com/about">About</a></li>
				<li><a href="http://www.noobcube.com/tutorials">Tutorials</a></li>
				<li><a href="http://www.noobcube.com/resources">Resources</a></li>
				<li><a href="http://www.noobcube.com/contact">Contact Us</a></li>
			</ul>
		</div>
	</div>
</div>

    So we need to move a couple styles from our header-wrap declarations to our new header-container styles.

    tutorial image

    Let's open up our main.css file and remove some styles from the #header-wrap declarations and add them to our new header-container element.

    #header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

#header-container {
	height: 90px;
	background: url(../images/header-bg.png) repeat-x left bottom;
}

    If you opened your page up in IE6 now, you wouldn't see any difference, because we still need to add the right-margin to the #header-container styles. We don't want to add this to our main.css file though. We only want to put the right margin declarations in our IE6.css file. Remember, all our modern browsers already have a working fixed header, there's no reason to add any styles that will effect its rendering. Open up your ie6.css file and add the highlighted values to your style sheet.

    html, body{
	height: 100%;
	overflow: hidden;
}

#header-wrap {
	position: absolute;
}

#header-container {
	margin-right: 17px;
}

#ie6-container-wrap {
	width: 100%;
	height: 100%;
	overflow: auto;
}

    Now take a look at it in IE6. Slap my ass and call me Charlie we have emulated a fixed header in IE6!

    Where's The Beef Footer?

    You're probably wondering, I thought this was going to have a fixed header and a fixed footer?. The reason I didn't cover them at the same time was to keep it simple. My purpose for this tutorial is to get you to understand not only how this works, but also why it works. Too much at once and you're likely to get overwhelmed, just copy and paste the results, without really gaining an understanding of what you've implemented.

    Now that we've got a working fixed header in not only the modern browsers, but also in IE6, it's a matter of duplicating our header markup and changing a few things around to get a working fixed footer. If you think about it, the only difference between the header and the footer is its height, background image, and position in the browser.

    tutorial image
    tutorial image

    As you can see, there isn't much difference between the markup of our header and footer. Keep in mind our IE6.css file also has important declarations in it. The difference is, the styles can be grouped together because they share the same properties and declarations.

    CSS (ie6.css)
    tutorial image

    So here's the markup (as always, I've highlighted the changes/additions):

    HTML (index.html)
    <div id="header-wrap">
	<div id="header-container">
		<div id="header">
			<h1>Fixed Header &amp; Footer<em>even IE6 behaves</em></h1>
			<ul>
				<li><a href="http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/">Home</a></li>
				<li><a href="http://www.noobcube.com/about">About</a></li>
				<li><a href="http://www.noobcube.com/tutorials">Tutorials</a></li>
				<li><a href="http://www.noobcube.com/resources">Resources</a></li>
				<li><a href="http://www.noobcube.com/contact">Contact Us</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="ie6-container-wrap">
	<div id="container">
		<div id="content">
			<h1>Sed ut perspiciatis unde</h1>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			<h1>Lorem ipsum dolor sit amet</h1>
			<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus. Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut. Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae, blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.</p>

			<p>Aenean aliquam erat neque. Mauris scelerisque vestibulum posuere. Praesent aliquet, quam vel fermentum posuere, leo felis varius magna, in pretium arcu mi vel ipsum. Sed porttitor venenatis tortor, semper pellentesque nisl placerat quis. Etiam ornare turpis id massa consectetur vestibulum. Pellentesque vitae suscipit lectus. Pellentesque in nisi eget velit scelerisque placerat a vitae ipsum. Mauris eu diam tortor, at blandit felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum volutpat pulvinar. Etiam congue risus ut turpis dictum nec dictum ligula porta. Nulla sit amet ipsum at ligula vulputate imperdiet. Nulla posuere, justo commodo mattis hendrerit, leo dolor auctor ligula, sed accumsan tellus ligula eu eros. Fusce pulvinar risus sed sapien facilisis at scelerisque risus bibendum. Quisque orci quam, porta sed ultrices vitae, faucibus sed mauris.  </p>

			<p>Cras turpis nisi, condimentum nec convallis at, lacinia sit amet diam. Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis. Suspendisse nisl lectus, porta ac tempor vel, gravida et mi. Cras tristique nisl at dolor adipiscing fermentum. Curabitur vitae lacinia quam. Phasellus urna sem, condimentum ut sagittis sed, dictum at lacus. Pellentesque felis turpis, interdum a adipiscing id, ornare eget ipsum. Aenean scelerisque diam sed orci lacinia rutrum dictum nisl congue. Curabitur vitae nunc velit, a pulvinar magna. Etiam venenatis placerat justo, sed rhoncus lectus venenatis at. Ut sagittis diam eu libero volutpat tempor. Phasellus non quam orci, malesuada volutpat eros. Suspendisse malesuada bibendum aliquet. Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh. Vivamus dignissim, sapien mollis eleifend tempor, tellus nulla ultrices velit, at tincidunt ligula sapien sed metus.</p>
		</div>
		<div id="sidebar">
			<h2>Sed ut perspiciatis</h2>
			<p>Nulla vehicula accumsan tincidunt. Nullam fermentum mi sit amet mauris viverra eleifend.</p>
			<blockquote>
				<p>Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh.</p>
			</blockquote>
			<p>Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis.</p>
			<h2>Nemo enim ipsam?</h2>
			<p>Mauris pellentesque imperdiet gravida. Duis lobortis ornare auctor. Nulla vehicula accumsan tincidunt.</p>
			<ol>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
			</ol>
			<p>Donec quam magna, dignissim nec elementum sed, iaculis sed libero.</p>

			<ul>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
			</ul>
			<p>Vehicula, risus in suscipit aliquet, tellus diam elementum ante, quis interdum massa dolor a leo. </p>
		</div>
	</div>
</div>
<div id="footer-wrap">
	<div id="footer-container">
		<div id="footer">
			Footer Content
		</div>
	</div>
</div>
    CSS (main.css)

    Place all these styles at the bottom of your main.css style sheet.

    #footer-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

#footer-container {
	height: 40px;
	background: url(../images/footer-bg.png) repeat-x left bottom;
}

#footer {
	width: 940px;
	margin: 0 auto;
	position: relative;
}
    CSS (ie6.css)

    Add the #footer-wrap and #footer-container selectors to the ie6.css file.

    #header-wrap, #footer-wrap {
	position: absolute;
}

#header-container, #footer-wrap {
	margin-right: 17px;
}

    Now if you save all 3 files and open your page up in IE6 you'll see some magic.

    We now have a fixed header and footer working in all the major browsers, even the dreadful IE6. However, you'll see two things that need some adjusting.

    You'll notice when we scroll to the bottom of our page content, the footer is obstructing the view of our page content a little bit. Remember when we added padding-top: 90px to #container? Well, we need to add some padding to the bottom as well. Our header's height is declared as 90px, so that was the amount of padding we added to the top of our #container as well. In this case, our footer has a height of 40px, so we need to add a 40px padding to the bottom of our #container as well. Before we do though; do you also see that tiny little gap between the bottom of the footer and the browser window? I'm not really sure why IE6 does this, but to fix it, we need to add a property declaration to our footer-wrap styles in ie6.css.

    Open up your main.css file and change the padding-top: 90px to include our padding-bottom: 40px as well.

    #container {
	width: 940px;
	margin: 0 auto;
	font-size: 1.4em;
	overflow: auto;
	padding: 90px 0 40px;
}

#content {
	float: left;
	width: 625px;
}

#sidebar {
	float: right;
	width: 275px;
	margin-top: 10px;
}

#footer-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

    Now open up your ie6.css file and add the highlighted styles to your file.

    html, body{
	height: 100%;
	overflow: hidden;
}

#header-wrap, #footer-wrap {
	position: absolute;
}

#header-contain,er, #footer-container ,{
	margin-right: 17px;
}

#footer-wrap {
	bottom: -1px;
}

#ie6-container-wrap {
	width: 100%;
	height: 100%;
	overflow: auto;
}

    Open up your index.html in any browser, including IE6, now and you'll see some real magic!

    Final Thoughts

    So there we have it, a fixed header and a fixed footer working in all our major browsers, including IE6. Now, I know this was a lonnnng tutorial, but you must know, that that doesn't mean that it takes a lot of work to implement this. It's actually very little markup. I just spent a lot of time explaining the process to you so that it sticks in your head and you actually know how and why it works.

    Here's what your 3 files should have in them.

    index.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Header &amp; Footer: Cross Browser</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>
<div id="header-wrap">
	<div id="header-container">
		<div id="header">
			<h1>Fixed Header &amp; Footer<em>even IE6 behaves</em></h1>
			<ul>
				<li><a href="http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/">Home</a></li>
				<li><a href="http://www.noobcube.com/about">About</a></li>
				<li><a href="http://www.noobcube.com/tutorials">Tutorials</a></li>
				<li><a href="http://www.noobcube.com/resources">Resources</a></li>
				<li><a href="http://www.noobcube.com/contact">Contact Us</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="ie6-container-wrap">
	<div id="container">
		<div id="content">
			<h1>Sed ut perspiciatis unde</h1>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			<h1>Lorem ipsum dolor sit amet</h1>
			<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus. Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut. Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae, blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.</p>

			<p>Aenean aliquam erat neque. Mauris scelerisque vestibulum posuere. Praesent aliquet, quam vel fermentum posuere, leo felis varius magna, in pretium arcu mi vel ipsum. Sed porttitor venenatis tortor, semper pellentesque nisl placerat quis. Etiam ornare turpis id massa consectetur vestibulum. Pellentesque vitae suscipit lectus. Pellentesque in nisi eget velit scelerisque placerat a vitae ipsum. Mauris eu diam tortor, at blandit felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum volutpat pulvinar. Etiam congue risus ut turpis dictum nec dictum ligula porta. Nulla sit amet ipsum at ligula vulputate imperdiet. Nulla posuere, justo commodo mattis hendrerit, leo dolor auctor ligula, sed accumsan tellus ligula eu eros. Fusce pulvinar risus sed sapien facilisis at scelerisque risus bibendum. Quisque orci quam, porta sed ultrices vitae, faucibus sed mauris.  </p>

			<p>Cras turpis nisi, condimentum nec convallis at, lacinia sit amet diam. Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis. Suspendisse nisl lectus, porta ac tempor vel, gravida et mi. Cras tristique nisl at dolor adipiscing fermentum. Curabitur vitae lacinia quam. Phasellus urna sem, condimentum ut sagittis sed, dictum at lacus. Pellentesque felis turpis, interdum a adipiscing id, ornare eget ipsum. Aenean scelerisque diam sed orci lacinia rutrum dictum nisl congue. Curabitur vitae nunc velit, a pulvinar magna. Etiam venenatis placerat justo, sed rhoncus lectus venenatis at. Ut sagittis diam eu libero volutpat tempor. Phasellus non quam orci, malesuada volutpat eros. Suspendisse malesuada bibendum aliquet. Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh. Vivamus dignissim, sapien mollis eleifend tempor, tellus nulla ultrices velit, at tincidunt ligula sapien sed metus.</p>
		</div>
		<div id="sidebar">
			<h2>Sed ut perspiciatis</h2>
			<p>Nulla vehicula accumsan tincidunt. Nullam fermentum mi sit amet mauris viverra eleifend.</p>
			<blockquote>
				<p>Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh.</p>
			</blockquote>
			<p>Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis.</p>
			<h2>Nemo enim ipsam?</h2>
			<p>Mauris pellentesque imperdiet gravida. Duis lobortis ornare auctor. Nulla vehicula accumsan tincidunt.</p>
			<ol>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
				<li>Excepteur sint occaecat</li>
			</ol>
			<p>Donec quam magna, dignissim nec elementum sed, iaculis sed libero.</p>

			<ul>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
				<li>Curabitur tempus tincidunt</li>
			</ul>
			<p>Vehicula, risus in suscipit aliquet, tellus diam elementum ante, quis interdum massa dolor a leo. </p>
		</div>
	</div>
</div>
<div id="footer-wrap">
	<div id="footer-container">
		<div id="footer">
			Footer Content
		</div>
	</div>
</div>
</body>
</html>
    main.css
    body {
	font: 62.5% Arial, Helvetica, sans-serif;
	color: #597347;
	margin: 0;
	padding: 0;
	background: #beffbf;
}

h1, h2 {
	color: #87ac6d;
	font-family: Tahoma, Arial, Geneva, sans-serif;
	margin: 20px 0 10px;
}

h1 {
	font-size: 2.5em;
}

p {
	margin: 10px 0;
	padding: 0;
}

blockquote {
	font-style: italic;
}

#header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

#header-container {
	height: 90px;
	background: url(../images/header-bg.png) repeat-x left bottom;
}

#header {
	width: 940px;
	margin: 0 auto;
	position: relative;
}

#header h1 {
	color: #beffbf;
	text-align: right;
	width: 290px;
	margin: 0;
	position: absolute;
	left: 0;
	top: 20px;
}

#header h1 em{
	color: #90b874;
	font-size: small;
	display: block;
}

#header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 35px;
	right: 0;
}

#header ul li {
	float: left;
	margin-right: 5px;
}

#header ul li a{
	color: #90b874;
	font-weight: bold;
	font-size: 1.4em;
	margin-right: 5px;
	text-decoration: none;
}

#header ul li a:hover {
	color: #beffbf;
}

#container {
	width: 940px;
	margin: 0 auto;
	font-size: 1.4em;
	overflow: auto;
	padding: 90px 0 40px;
}

#content {
	float: left;
	width: 625px;
}

#sidebar {
	float: right;
	width: 275px;
	margin-top: 10px;
}

#footer-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

#footer-container {
	height: 40px;
	background: url(../images/footer-bg.png) repeat-x left bottom;
}

#footer {
	width: 940px;
	margin: 0 auto;
	position: relative;
}
    ie6.css
    html, body{
	height: 100%;
	overflow: hidden;
}

#header-wrap, #footer-wrap {
	position: absolute;
}

#header-container, #footer-container {
	margin-right: 17px;
}

#footer-wrap {
	bottom: -1px;
}

#ie6-container-wrap {
	width: 100%;
	height: 100%;
	overflow: auto;
}

    I just added some additional content and styles to include some footer content in my original demo. You're free to check them out in the source files (in the "final" folder).

    I hope you learned from this tutorial and enjoyed reading it. If you have any problems with implementing this, don't be afraid to ask questions in the comments. Thanks for reading!