Mywebdunia's Blog

Aligning a footer at the bottom of the page, when you are creating a layout with tables is not a big issue. We can make it within no time. But if you want to align a footer at the bottom of the page always, even if there is no content and for different resolutions, there is a big constrain. We are not able to get the footer at the bottom of the page. Well if it would have been a table we would have given height=100% for the main table, which will of course will get the footer at the bottom of the page no matter how short the content is.

Well so how to get this working with div’s. I always have this problem in fixing this issue, in most of my websites. Either I used to use table or I used to say leave it why the hell I should worry. but I was thinking of it in the mean time how that could be done. Well I got a solution for this after a long research.

Well just try with the below code
HTML Code:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”content”></div>
<div id=”footer”></div>
</div>

CSS Code:
<style type=”text/css”>
html,body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#5CAAC7;
height:100px;
}
#content {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
border-top:1px solid #484848;
background:#EAEAEA;
}
</style>

Well the above example is a simple layout, for the body tag remove the margin and padding so that there is no default padding and margins and set the height to 100% which will allow us to set the height of the main div to 100%.

Make the wrapper div min-height to 100% so that there is a 100% height always for the layout, but this may not work for the old out dated browsers. And set wrapper div’s position:relative which will allows us to absolutely position elements inside it later. Header div is your choice what ever height or color you can specify.

And about the content div there should be a padding bottom same as that of the footer height. The div should be positioned as absolute and bottom as 0 which will move it to the bottom of wrapper div. When there is little content on the page the wrapper div is exactly the height of the browser viewport (because of the min-height:100%;) and the footer sits neatly at the bottom of the screen. When there is more content in the page then there is no question it will automatically set the footer div to the bottom of the page.

For older browser min-height:100% doesnt work well, so for that you can use height:100%.

So there it is.. isn’t it simple. A simple and a valid way to get footer at the bottom of the page. So try it out if any issues let me know…

I hope you will find it useful….