Page 1 of 1

Creating a Fixed Header or Footer Using CSS to make a fixed header or footer that stays above the page c Rate Topic: ***-- 1 Votes

#1 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 207
  • View blog
  • Posts: 988
  • Joined: 28-February 09

Post icon  Posted 30 November 2009 - 05:56 PM

If you are looking for a fixed header of fixed footer you have come to the right place. In this tutorial I will be going over the basic page setup for sections of content, the header bar, footer bar, CSS and HTML.

The CSS code for a header is quite simple depending on how you would like it to interact with the rest of the page.

#header {
	top:0px;
	right:20px;
	left:20px;
	position:fixed;
	background: #eee;
	border:1px solid #ccc;
	padding: 0 10px 0 20px;
	}
	#header h1 {
	margin: 0px;
	padding: opx;
	font:18px “Plantagenet Cherokee”;
	letter-spacing:2px;
	}


The above CSS contains the header div and the H1 tag. There are four very important things that are required when having a fixed header. First: It must have the position set to fixed. The other three are all about positioning and linking it to the top and sides. With the above code we set the sides to link 20px from the browser and the top to link directly.

Another important part of the CSS is having the page contents forced below what the header is covering. This will allow us to see div that is underneath. That chunk of CSS looks like this.

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
	margin-top:40px;
	}


The HTML looks something like this.

<html>
	<head>
	<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
	<title>Dream In Code Tutorial</title>
	<link href=”style.css” rel=”stylesheet” type=”text/css” />
	</head>

	<body>
	<div id=”header”>
	<h1>Header</h1>
	<!– end #header –></div>
	<div id=”container”>
	<div id=”mainContent”>
	<h1> Main Content </h1>
	</div>
	<div id=”footer”>
	<p>Footer</p>
	</div>
	</div>
	</body>
	</html>


Generally the header is kept withing the container to keep it aligned with the rest of the page however we wanted it to break out of the rest of the page and thus we moved it up, out and away.

The rest of this article will cover the footer which is very similar except for a few things. The footers CSS is going to be fixed to the bottom and not the top which is unlike the header. We will also need to pull it out of the HTML so it can fill up and be safe across browsers.

So first we will take note of the css which goes something like this:

#footer {
	padding: 0 10px;
	background:#EEE;
	bottom:0px;
	right:0px;
	left:0px;
	position:fixed;
	}
	#footer p {
	margin: 0;
	padding: 10px 0;
	}


Once again we bring in the four important properties; bottom, left, right, and position. You will also need to change the body tag in the CSS so the footer does not overlap the content you would like the readers to see. This CSS is going to look like this:

	body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
	margin-bottom:50px;
	}


And now finally we will look at the HTML to see the footer break out of the container similar to what the header did.

<!– end #container –></div>
	<div id=”footer”>
	<p>Created by Caleb J</p>
	</div>


And now you should have a basic understanding of how to create a header and footer that are set in fixed positions similar to how Facebook does theirs.

Is This A Good Question/Topic? 1
  • +

Replies To: Creating a Fixed Header or Footer

#2 Harlen  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 40
  • Joined: 08-February 10

Posted 24 March 2010 - 09:01 AM

Thanks a lot! I been trying to learn this in Javascript, but it seems CSS can do a lot more than what I learned in school!

P.S. Does this work in IE as well?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1