Positioning Footer at the bottom of the Browser
November 2nd, 2005
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!