PROWARE technologies
PROWARE technologies

How to Position the Page Footer at the Bottom (HTML/CSS Only - IE6 Compatible)

This article is about how to always make the footer appear at the bottom of the page using HTML and CSS. This code is compatible with IE6 and newer browsers.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Footer Positioning</title>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			height: 100%;
		}
		body {
			background-color: #444444;
			color: white;
			background-image: url(https://picsum.photos/id/135/1920/1080);
			background-attachment: fixed;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		div#container {
			position: relative;
			width: 100%;
			font-family: sans-serif;
			height: auto !important;
			height: 100%;
			min-height: 100%;
		}
		div#header {
			background-color: black;
			line-height: 100px;
			height: 100px;
		}
		div#header h1 {
			margin: 0;
			padding: 0 0 0 10px;
		}
		div#main {
			padding: 10px 10px 125px 10px; /* bottom padding should be greater than or equal to footer height */
		}
		div#footer {
			position: absolute;
			width: 100%;
			bottom: 0;
			background: black;
			text-align: right;
			line-height: 100px;
			height: 100px;
		}
		div#footer p {
			margin: 0;
			padding: 0 10px 0 0;
		}
	</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Acme</h1>
	</div>
	<div id="main">
		<h1>IE6 Compatible</h1>
	</div>
	<div id="footer"><!-- must use a DIV for compatibility with IE6 -->
		<p>copyright &copy; Acme</p>
	</div>
</div>
</body>
</html>

Coding Video

https://youtu.be/isy63GbEK_s

Contact