Live Expert Chat
(866) 431-6669 (212) 334-3390

Home > Website Development Articles > Positioning Footer at the bottom of the Browser

Positioning Footer at the bottom of the Browser

By Shruti Gupta

September 20, 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.

CSS needed to achieve the above result:

<style type="text/css">

<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!

Feedback Form