Always bottom footer with CSS only – Tutorials


A lot of the clients had request us with the following request, they want the footer to be “ALWAYS” appear on the very bottom without any JavaScript. So here you go. Also today we had completed the footer on our coming to launch Joomla templates Busuits, you can also view the footer in action under here.

CSS for your always bottom footer

CSS – always bottom footer

html,body{margin:0; padding:0; height:100%;}
#vc-main{min-height:100%; position:relative;}
#vc-header{background:#9F0;}
#vc-body{padding-bottom:80px;} /* Height of the footer */
#vc-footer{position:absolute; bottom:0; width:100%; height:80px;/* Height of the footer */background: #FC0;}
p, h1{padding:10px; margin:0;}

CSS hack for your Internet Explorer 5.5, 6 and 7

ie hack

<!--[if lte IE 7]>
<style type="text/css">
#vc-main{height:100%;}
</style>
<![endif]-->

HTML

html code. Place this html code within your html tag

<body>
<div id="vc-main">
    <!-- BEGIN: HEADER-->
    <div id="vc-header">
    <p>Header here</p>
    </div>
    <!-- END: HEADER -->
        
    <!-- BEGIN: BODY -->
    <div id="vc-body">
    <p>Body here</p>
    </div>
    <!-- END: BODY -->
        
    <!-- BEGIN: FOOTER -->
    <div id="vc-footer">
    <p>Footer here</p>
    </div>
    <!-- END: FOOTER -->
</div>
</body>
See the always bottom footer in action: Plain HTML | Joomla Demo


Download: Always bottom footer with CSS only - Download (2548)

Be a link sponsor for this page now

[sponsorbox]


Related Posts Plugin for WordPress, Blogger...

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!

Be Sure to Subscribe to our feed or follow us on twitter to get the latest updates/patches
End of Article, Thanks for reading.
You can leave a response, or trackback from your own site.

9 Responses to “Always bottom footer with CSS only – Tutorials”

  1. Very nice post. Do you accept guest writers?

    • Hi Wendy,
      Yes we do accept guest writers.
      Currently we have not setup the form for it yet.
      please send your information to info@designersandbox.com
      Please give us some background knowledge about yourself, and the topics you are interested in.
      Thanks for the love of this site, and thanks for your contribution.

  2. thanks !! very helpful post!

  3. There is certainly certainly a good deal to know about this. I think you created some good points in this subject. So, just want to express excellent job!

  4. Quick Facts says:

    Best you should make changes to the webpage name title Always bottom footer with CSS only – Tutorials | Designer Sandbox to more catching for your subject you write. I enjoyed the post still.

  5. Gregory Czat says:

    Happy new year :) Good article

  6. Sabuj says:

    This is not working for IE7

  7. Redty says:

    That will never work.

    Use "position: fixed" instead.

    Good article ;-)

  8. sonla says:

    This is not working for mobile

Leave a Reply