Hey, I'm looking to make my footer stick to the bottom with a space separating it from the main page, but still be as wide as I wish. It should look like the footer on this site: http://www.patrickmoberg.com Whenever I try and do it on my site (http://www.dateunknown.com), it messed up. Thanks in advance for the help.
Was this a trick to get visitors to your newly built site? As i don't see a footer. But this works - http://www.cssstickyfooter.com/
No shit. That's because I can't put one there without it messing the page up. I could care less about the few hits I'd get from here to my "newly built site" that's been up for over 2 years.
Too bad that one doesn't work in Opera 9.64 and relies on that clearfix *******. (why the *** are people STILL using that?!?) Try this on for size http://battletech.hopto.org/html_tutorials/minHeight/template.html Shows how to implement it with a two column fully fluid layout and a centered inline-block menu. The biggest drawback is that without resorting to tables, any 100% min-height layout must have a FIXED HEIGHT footer to not break - likewise you cannot even use dynamic metrics for that footer like EM, because FF will rarely ever accurately calculate the negative margin the same size as the declared height due to how it calculates element sizes (which is to say like a epileptic crack addict) Actually doing this in CONCEPT is simple, but the implementation is a pig. What you want is min-height, but IE6/earlier has no min-height so you have to find a way to send 'height' to IE6, which it incorrectly treats as min-height. In order to declare a height in percentage, the parent elements have to have a height declared on them - unfortunately FF, Opera, Safari and IE cannot agree WHICH parent element (HTML or BODY) so you have to set it on BOTH. In addition Opera can flake out a bit on this if you don't set position:relative on BODY (it's harmless to set it on both, so why waste the extra declaration) There is one niggling problem EVERY implementation of this has, in Opera it will not auto-resize if you change the window size, you have to refresh the page to get it to re-render. You can if desired add a bit of .js that detects the window resize and does a 'margin shuffle' (add 1px right margin to body, then remove it 30ms later) to force the re-render, but I usually don't bother with that.
@VolumeAds thats they you reply to someone on a public forum who tries to help? Bad. @deathshadow, yes you are right, i have not checked in that version of Opera so will take your words for it, and its main limitation is it needs fixed height footer. Thought that ugly clearfix is not a absolute necessity (have used it without clearfix )