This topic that i wish to share with all you people is something that every
developer must have it as the basic and a very important requirement before he/she starts his website design. This topic will teach you how you can have your website footer stick to the bottom of the browser. Specially this case might be a challenge in case your page size is smaller than the computer screen where u might have the footer to appear wiered and does not makes a look as it looks different in different screen size.

If u have a webpage that has the size of the screen and browser then just hit F11, you will notice the issue i am referring to here..

So to have this issue solved, i advice every one that you look for this as u start your design rather than searching a solution after the design is complete, because as the design gets done we might have to change the structure of the whole page layout as per the solution’s requirement. So look for this before you have your start.

Okie let me jump in to the ral issue here, first for those who might have not understood the issue let me brief with a simple diagramatic presentation which will help you out comprehensively..

the first image down here shows the real problem that we have in the usual way of our design,

now as we apply the technique through our CSS, we might have it solved as is shown below..

lets see what really we got to do to have the solution,
the first thing to concentrate is how to have your page structure designed, so the HTML page layout must be something like this,

<div id=”content-holder”>
<div id=”header”></div>
<div id=”main-content”></div>
<div id=”footer”></div>
</div>

Once you follow up the above structure the way from here on is more simple than you might have imagined, because that is the power of CSS 🙂

All you have to do is simply add the CSS to your web page as is shown below with all your requirements as per the design you like to apply,

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

#content-holder
{
margin: 0 auto;
min-height:100%;
position:relative;
}

#header
{
background:#6eed71;
padding:10px;
}

#main-content
{
padding:10px;
padding-bottom:60px;   /* Height of the footer that we use below here */
}

#footer
{
position:absolute;
bottom:0;               /*very important property*/
width:100%;
height:60px;   /* Height of the footer that you can have it as per your need and requirement */
background:#6eaee4;
}

this is it we are done, but hold on we have to make it compatible with all other browsers, right???
so there is an additional code added for the IE6,

#content-holder
{
height:100%;
}

Advertisements
%d bloggers like this: