NickNameDrive
10-09-2010, 11:52 AM
There's a sure implimantation of sticky footer in CSS out there. However, at some point I couldn't get that !important is not just a mere comment but a main part of the code. Therefore I had to figure sticky footer myself. And I used <table> for that. Wrong obvious, but <table> does have a pre-build oprions into it, so could be usefull for some to wrap the hole thing in it, noone needs to know. Cross browser!
Here's the code if anyone interested:
first is height and gap-less margin, always good to start with
html, body {height:100%;min-height:100%;margin:0 auto;}
than a <table align="center" height="100%" >
as said, <table> has pre-build options, such as width, border, bgcolor, callspan and cellspan etc., utilize those if you must.
next is footer
<div or whatever with style="height:20px; margin-top:-20px; usually not neccessary but you may need to include z-index:1;></div>
if you need to make bottom of table clear of overlapping on footer, use padding.
That's it, a very very easy way to stick your footer to the bottom of the screen. I think that is it and i'm not missing anything, if anyone checks tell me how it went. Hope it helps!
Here's the code if anyone interested:
first is height and gap-less margin, always good to start with
html, body {height:100%;min-height:100%;margin:0 auto;}
than a <table align="center" height="100%" >
as said, <table> has pre-build options, such as width, border, bgcolor, callspan and cellspan etc., utilize those if you must.
next is footer
<div or whatever with style="height:20px; margin-top:-20px; usually not neccessary but you may need to include z-index:1;></div>
if you need to make bottom of table clear of overlapping on footer, use padding.
That's it, a very very easy way to stick your footer to the bottom of the screen. I think that is it and i'm not missing anything, if anyone checks tell me how it went. Hope it helps!