Sticky Header or Footer Divs using Simple CSS

Posted on April 23, 2013 by Dan Doicaru in HTML/CSS Category

If you are searching for a simple sticky footer to the bottom of your page compatible with all browsers, here is a useful tutorial on how to do it using some CSS tricks. The same thing you can do with your header. We will give some html demo examples of both sticky header and footer.

The Sticky Header Div

Just a quick reminder. Sticky header means that when you scroll down or up your page that div must remain on the same position, top for header, and bottom for footer.

Results should be like the picture below:

Create a Simple Sticky Header or Footer Divs using CSS Tricks

So, now that you know the thing above we can start coding. We will have a white page with some text and a top menu with a custom background which will be the sticky header.

You can view a live demo of sticky header here.

Sticky Header HTML Structure

First of you should have the following files:

step1-files

The custom repeating background with sharp edges can be downloaded here. (if you can't see the image, don't worry is there, is just white color, matching with your browser background color)

Create a new html file named "index.html". The structure should be box inside a box or div inside another, so we should have the HTML like below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>How to Create a Simple Sticky Header Div using some CSS Tricks</title>
	<link type="text/css" href="styles.css" rel="stylesheet" />
</head>

<body>

	<div class="header">
		<div class="menubg">
			<div class="menu">
				<a href="http://html-tuts.com" target="_blank">Blog</a>
				<a href="https://www.facebook.com/extremestudio" target="_blank">Facebook</a>
				<a href="https://twitter.com/extremestudio" target="_blank">Twitter</a>
			</div>
		</div>
		<div class="clear"></div>
		<div class="custombackground"></div>
	</div>

	<div class="center">
		<div class="content">
			<h1>Sticky CSS Header</h1>
			<p>Inside content div you can put a lot of content. Check the demo in the article.</p>
		</div>
	</div>
</body>
</html>

Be sure to fill the content with a lot of text, so after we will write the CSS, div header must remain on the top whenever you scroll down.

Sticky Header CSS Structure

Now to do the magic trick, create a file named "styles.css", in the same folder with the html file.

*{margin:0;padding:0;}
body{
	background: #EEE;
	color:#222;
	margin:0;
	padding:0;
	font-family: Arial, sans-serif;
	font-size: 10pt;
	line-height: 190%;
}
img {border:none;}
a {text-decoration:none;color:#ff4747;}
a:hover {text-decoration:none;color:#222;}
.clear {clear:both;}
.center {
	max-width:600px;
	width: 100%;
	margin:0 auto;
}
.header {
	text-align:center;
	position: fixed;
	top: 0;
	z-index: 999;
	width:100%;
}
.custombackground {
	height: 25px;
	width: 100%;
	background: transparent url("images/custombg.png") repeat-x top left;
}
.menubg {
	width: 100%;
	padding: 5px 0;
	background: #FFF;
	float:left;
}
.menu {
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
}
.menu a {
	background: #ff4747;
	color: #FFF;
	padding: 0 15px;
	margin: 10px 0 10px 20px;
	line-height: 40px;
	float:left;
}
.menu a:hover {
	background: #ef3535;
}
.content {
	margin: 120px 20px 0 20px;
	padding-top: 20px;
	border-top: 5px solid #ff4747;
}
.content img {
	max-width: 600px;
	width: 100%;
}
.content h1,
.content h2,
.content p {
	margin-bottom: 25px;
}

Now you can test your files to see the results. You should have the same like here.

If you want you can download the files from here, to check the code better.

The Sticky Footer Div

Now is time to create a sticky footer. We will have a little special design here so pay attention.

To make an idea here is a quick demo.

sticky-footer-box-with-css

Using a transparent PNG we created a great effect with some clouds. The image is repeating infinitely on X Axis, same like the one from header. You can download the clouds image from here. Just to know again, the image is white so it will match with the same background white of the browser.

Writing the HTML Structure

HTML should be similar to the header part, but we will create another div with just nothing inside. Here is the html:

<div class="header">
	<div class="menubg">
		<div class="menu">
			<a href="http://html-tuts.com" target="_blank">Blog</a>
			<a href="https://www.facebook.com/extremestudio" target="_blank">Facebook</a>
			<a href="https://twitter.com/extremestudio" target="_blank">Twitter</a>
		</div>
	</div>
</div>

<div class="clear"></div>

<div class="center">
	<div class="content">
		<h1>Sticky CSS Footer</h1>
		<p>Inside content div you can put a lot of content. Check the demo in the article</p>
	</div>
</div>

<div class="footer"></div>

Now you are done with the HTML part. We can begin with the CSS part.

Writing the CSS for Sticky Footer Div

This css is a slightly different than the one from header. We removed some things and added the footer class. Check below:

*{margin:0;padding:0;}
body{
	background: #EEE;
	color:#222;
	margin:0;
	padding:0;
	font-family: Arial, sans-serif;
	font-size: 10pt;
	line-height: 190%;
}
img {border:none;}
a {text-decoration:none;color:#ff4747;}
a:hover {text-decoration:none;color:#222;}
.clear {clear:both;}
.center {
	max-width:600px;
	width: 100%;
	margin:0 auto;
}
.header {
	width:100%;
}
.menubg {
	width: 100%;
	padding: 5px 0;
	background: #FFF;
	float:left;
}
.menu {
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
}
.menu a {
	background: #ff4747;
	color: #FFF;
	padding: 0 15px;
	margin: 10px 0 10px 20px;
	line-height: 40px;
	float:left;
}
.menu a:hover {
	background: #ef3535;
}
.content {
	margin: 60px 20px 120px 20px;
	padding-top: 20px;
	border-top: 5px solid #ff4747;
}
.content img {
	max-width: 600px;
	width: 100%;
}
.content h1,
.content h2,
.content p {
	margin-bottom: 25px;
}

.footer {
	position: fixed;
	bottom: 0;
	z-index: 999;
	width: 100%;
	height: 87px;
	background: transparent url("images/custombg.png") repeat-x top left;
}

You should something similar like this demo page.

Conclusion

Remeber, if you use sticky divs you can notice the z-index property in css. This property is basically the same thing as using Layers in Photoshop.

This technique can be used to create sticky sidebars too, but use it with caution.

The sticky header should stay on the top even if you scroll the page down. Same with the footer should remain on bottom. You can't click or select anything under the sticky box, because obviously the box should be above the content.

Download Sticky Header Files

Download Sticky Footer Files

Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


3 + 9 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.