There are many sticky footer methods to be found in Google. We,’ve tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don’t in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
Here i am going to share a css sticky fooyter that works on all major browsers
The HTML Code
Below is the basic structure of the HTML code. You’ll notice how the footer <div> sits outside of the wrap <div>.
<div id=”wrap”>
<div id=”main”>
</div>
</div>
<div id=”footer”>
</div>
You would place your content elements inside the main <div>. For example, if you were using a 2 column floating layout you might have this;
<div id=”wrap”>
<div id=”main”>
<div id=”content”>
</div>
<div id=”side”>
</div>
</div>
</div>
<div id=”footer”>
</div>
A header could be placed inside the wrap but above the main like this;
<div id=”wrap”>
<div id=”header”>
</div>
<div id=”main”>
</div>
</div>
<div id=”footer”>
</div>
If you wanted to place any elements outside of either the wrap or the footer then you would need to use absolute positioning else it messes up the 100% height calculations.
The CSS Code
Below is the CSS code makes your sticky footers to stick to the bottom.
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
You’ll notice that the footer height is used three times here. This is important and should be the same value for all three instances. The height properties are stretching the wrap <div> to the full height of the window. The negative margin of the footer brings it up into the padding created for the main <div>. Since the main rests inside the wrap the padding height is already part of the 100%. Thus the footer rests at the bottom of the page.
But we are not done just yet. We need to add the clearfix properties to the main <div>.
Clearfix Hack to the Rescue
Many CSS designers will be familiar with the Clearfix Hack. It solves a lot of problems with floating elements. We use it here to get the footer to stick in Google Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and your sidebar to the other. The floating content elements inside the main <div> can cause the footer to become un-stuck in some browsers.
So we add this to our stylesheet as well;
.clearfix:after {content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
If you prefer to use the above method with the extra push <div> you’ll still need to apply a clearfix if you are using a floating multi-column layout.
14 Comments
Leave a Comment
Your blog is really intriguing,I would like to communicate with u,could i sent email for you?
yes you can contact me if you need anything to know
enjoyed this article!
I have read couple of articles on your blog and can say it was really interesting, thanks for sharing that.
I just wanted to comment your blog and say that I really enjoyed reading your blog post here. It was very informative and I also digg the way you write! Keep it up and I’ll be back to read more soon mate
shares employ a terrific site decent Gives many thanks for the effort to help me personally
This could be the earliest time I’ve commented right here and I have to say you give genuine, and excellent facts for bloggers! Wonderful employment.
Keep posting stuff like this i really like it
This article gives the light in which we can observe the reality. this is very nice one and gives in depth information. thanks for this nice article.
Your weblog is incredibly intriguing,I wish to connect with u,could i sent e-mail to you?and this my blog http://scuba-dive-sites.com/ wellcome!
I read you post . this is informative and helpful.. I like to know more about affiliated marketing.. Thanks for sharing your knowledge about it.
This page wasnt working yesterday. i tried viewing it but it timed out 3-4 times now but i can access it now. Why did this happen? Am i the only one having this problem?
Hey – wonderful weblog, just seeking all around some blogs, appears a fairly wonderful platform you are using. I’m presently working with WordPress for a few of my sites but searching to change among them over to a platform much like yours like a trial run. Anything in certain you’d advocate about it?
Priceless information! I will check back very often for more great articles like this one.