<header>
	<h1>Creating a fixed footer with CSS</h1>
	<p>An easy CSS technique to create a footer at the bottom of your webpage.</p>
</header>
<section>
	<article>
		<h2>Article 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
		<p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.</p>
		<p>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
	</article>
	<article>
		<h2>Article 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
		<p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.</p>
		<p>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
	</article>
</section>
<footer>
	<p><sup>&copy;</sup> D Fox</p>
</footer>
footer {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #ff9900;
	color: white;
	text-align: center;
}

/* prettiness */
* {
	font-family: Arial;
}
article > p {
	font-style: italic;
}
h1 {
	font-size: 2em;
}
p {
	font-size: 1.2em;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.