Footer Stick…

good code

So maybe I am a little slow, but a while ago I was really trying to get a good footer stick solution. Well if you were to browse Google for all of 10 minutes you’d find a lot the three links listed below.

Here is where the trouble started.

http://qrayg.com/learn/code/footerstick/ They tell you all about how that method is obsolete. And then go…

http://www.themaninblue.com/experiment/footerStickAlt/ with an explication here…

http://www.themaninblue.com/writing/perspective/2005/08/29/ Well none of these were working quite right.

So I came up with my own modification. This has been cross browser tested and works well in all environments (to my knowledge let me know if otherwise).

Here goes..

css -->
html, body {
height:100%;
}
#wrapper {
width:800px;
margin:0 auto;
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
#content {
float:left;
width:500px;
padding-bottom:100px;
}
#footer {
position:relative;
width:800px;
margin:0 auto;
height:100px;
margin-top:-100px;
}
.clear {
clear:both;
}
html -->
<body>
<div id="wrapper">
<div id="content"> </div>
<div class="clear"> </div>
</div>
<div id="footer"></div>
</body>

This has seemed to be the best solution for me. Let me know what you all think.

Filed under: Code, Resources by Dan

No comments