⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Fixed Header and Footer Div Layout Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to create a fixed header and footer web page layout using CSS to pin the div elements exactly where you want them to live on the page. 
<!DOCTYPE html>
<html>
<head>
<style>
body {
	background-color: #CCC;
	margin:48px 0px 0px 64px;
}
div#topdiv {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#333;
	padding:8px;
}
div#bottomdiv {
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#333;
	padding:8px;
}
</style>
</head>
<body>
<div id="topdiv">Top div content</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="bottomdiv">Bottom div content</div>
</body>
</html>
▲