Doxbo

Sample

HTML code

<!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" xml:lang="en">
	<head>
		<title>A CSS Sticky Footer</title>
 
		<!--
		The second stylesheet is to make things look pretty.
		The first one is only the important one.
		-->
 
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
		<link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
 
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
 
	</head>
	<body>
 
		<div class="wrapper">
 
			<div class="header">
				<h1>CSS Sticky Footer</h1>
			</div>
 
			<div class="push"></div>
 
		</div>
 
		<div class="footer">
			<p>Copyright &copy; 2006-2008 Ryan Fait &mdash; <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p>
		</div>
 
	</body>
</html>

CSS code

* {
	margin: 0; /* be careful, these resets ALL the margins on the HTML */
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 142px; /* .push must be the same height as .footer */
}
 
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/

Links

Tutorial

Doxbo

Table of Contents

How to make a sticky footer

Sample

Links

Doxbo

User Tools

Site Tools

Table of Contents

How to make a sticky footer

Sample

Links

Page Tools