Keeping footer always at the Bottom of the Page

In a recent website work I had to keep footer always at the bottom regardless of the content. If there is no content or very less content then footer use to come up instead of sticking at bottom of the page. Here is the CSS solution I found for the same:

Lets say the page structure is something like this:

<html>
<head><title>TITLE</title></head><body>
<div id="page">
 <div id="header">HEADER</div>
 <div id="content">CONTENT</div>
 <div id="footer">FOOTER</div>
</div>
</body>
</html>

Then we just need to use the following CSS code for footer which we need to keep in head section or some CSS file which will linked in head section:

<!--
#page
{
 position:relative;
 height:100%;
}
#content
{
 padding-bottom:40px;   /* Height of the footer */
}
#footer
{
 position:absolute;
 bottom:0;
 width:100%;
 height:40px;   /* Height of the footer */
}
-->

and we are done. Just test in any browser :)

This can be quite easily done without using any CSS if we are using <table> tag with height attribute instead of <div> tag. for e.g.

<html>
<head><title>TITLE</title></head>
<body>
 <table width="100%" height="100%">
 <tr><td valign="top">HEADER</td></tr>
 <tr><td valign="middle">CONTENT</td></tr>
 <tr><td valign="bottom">FOOTER</td></tr>
</table>
</body>
</html>

Here table height is set to 100% to use whole page and valign is used for vertical alignment of .  height attribute can be avoided using style element.

This will work fantastic but might fail in W3C validation as height attribute is no more supported so better use the solution with <div> tag with CSS.

Note: I tested this in Chrome browser only.

Have Fun ;-)

About these ads

About Deep C

A web application developer with expertise in PHP, MySQL, PostgreSQL, JavaScript, jQuery, HTML5, CSS3 View all posts by Deep C

4 responses to “Keeping footer always at the Bottom of the Page

  • NilZee

    Nice Articel Dear,
    its very helpful to me.Keep it up.

  • hemal

    Hey Deepesh,

    You can also use the same for HTML5. In HTML5, you get a dedicated element for footer. Instead of having a DIV tagged as Footer, you can directly classify the styles for footer directly instead of .footer or #footer

    You can learn more on the HTML5 bit now that its something thats gonna work for sure in the future. The navie support for olderformats wont go anytime sooon, but html5 does a lot of things easier for us.

    I hope you must be aware of this… btw, i am Blogrolling you on my blog. I wasnt aware of your blog till now :(

  • hemal

    Dont preach the use of Table based layouts, they are a passe now.. div based liquid layouts are the need for the day.. concentrate on that… :P i know i shudnt be advicing, but just saying

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: