PROWAREtech

articles » current » css » position-footer-at-the-bottom

CSS: Position Page Footer at the Bottom

How to position the page footer at the bottom for all browsers including IE6.

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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE