I am going to show you how to create sticky footer. In other words, this tutorial demonstrates how to keep the footer at the bottom of the page on short documents or pages with little content using CSS and HTML.

Prerequisites

HTML, CSS

HTML Part

In the below HTML code I have written simple nested <div/> tags. These <div/> tags represent header, sidebar, content and footer.

<div class="container">
    <div class="header">&nbsp;</div>
    <div class="sidebar">&nbsp;</div>
    <div class="content">&nbsp;</div>
    <div class="footer">
        <p>This is a simple footer.</p>
    </div>
</div>

In the above source code you have main wrapper div with class container. Inside container we have header, left sidebar, content and footer.

So when you will apply the css then the footer will sit at the bottom whether content section holds any content or not. You can either include the below style inside the <head/> tag or you can use as an external css file and then include the css style into the <head/> section of the HTML.

CSS Part

I am going to apply some CSS rules for putting the footer at bottom.

html, body {
	margin:0;
	padding:0;
	height:100%;
}
.container {
	width: 960px;
	margin:auto;
	min-height:100%;
	position:relative;
	background: #FFF;
}

.header {
	height: 50px;
	background: #ADB96E;
}

.sidebar {
	float: left;
	width: 180px;
	background: #EADCAE;
	padding-bottom: 10px;
}
.content {
	background:#5ee;
	padding: 10px 0;
	width: 780px;
	float: left;
}
.content {
	padding-bottom:80px; /* Height of the footer element */
}

.footer {
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	background: #CCC49F;
}

Testing

Executing the above code into an HTML file will give you the following output:

Source Code

Download

Thanks for reading.