Sticky footer again!

[NickNameDrive]

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!

[traq]

It's not a good idea to fall back on tables for layout. Tables have their own issues with formatting, javascript, and more; especially in IE.

This sticky footer has never failed me. Follow the implementation, and it's perfectly reliable, cross-browser, and still allows you to do almost anything you'd like with the layout.

[NickNameDrive]

<table> based have never failed eighter

despite being wrong, maybe some might find those <table> features usefull when designing the layout, though i can't think which and where, but in general it's another way.