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!
Related posts:
- How to Make the Background of a Div Semi-Transparent? If you look below, the light gray div over the...
- How to Create Table With First Column Frozen? Here is a HTML technique that can be used to...
- Conversion from HTML to XHTML At Ecommerce Partners.net, we (HTML Production Department) were producing html...
Tags: CSS, HTML/XHTML, Website Development