Positioning Footer at the bottom of the Browser

Here is an example for how to position the footer at the bottom of the browser using CSS. In the following examples, footer will always stay at the bottom of the browser irrespective of the amount of the content.

Footer at the bottom of the browser with long content

Footer at the bottom of the browser with short content

CSS needed to achieve the above result:

<style type="text/css">

html, body {height:100%; margin:0; padding:0; border:0;}

#holder {position:relative; min-height:100%; margin:auto; width:800px;}

* html #holder {height:100%;} – hack for minimum height in IE

#header {width:700px; height:100px; margin:auto;}

#maincontent {padding-bottom:150px;}

#footer {width:700px; height:99px; position:relative; margin:-6.2em auto 0 auto;}

</style>

In the HTML, we need to make sure that the holder div has the minimum height of 100% and contains both the header and the main content but not the footer. Footer is positioned relative to the holder div.

It’s as simple as this!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.