I want to position the footer at the bottom, and there are quite a few CSS layouts that place their footers at the bottom, BUT as I checked a couple of them, they overlap their contents. I want the footer to stay at the bottom of the page always, but at the same time, I don't want it to hide the content in the center. How can I do this using CSS? (http://www.cre8iveonline.com/jewellery/index.htm is the site I'm currently working on. When there is enough space on the screen, then I want the footer to stay at bottom of the page, but when there is not enough space, then I want it to stay at the bottom of the page, i.e., hidden below the screen.)
Might I ask why the page seems to be in a constant javascript look doing... nothing? It seems to be refreshing the same content over and over without doing ANYTHING - the effect is quite annoying and hogging lots of CPU too. (Opera and FF, IE seems to throw a .js error) Some advice - axe all that transparant image nonsense, nueter the javascript so you aren't wasting 15k of markup on 43 bytes of actual content much less the hundred k of nothing mootools rubbish, get rid of all the presentational markup, ease up on the use of classes when they aren't necessary, (ALL of those 'slideshowthumbnail' classes for example), lose the tables on elements that don't need to be tables, etc, etc. In terms of what's actually markup once you get rid of the javascript, I'd say 70% of what you have there is unneeded code. Look at that menu: table, a whole row of empty TD's, TD's with double nested DIV's that aren't DOING ANYTHING, etc, etc... You've got so much presentational markup it's a miracle if you can find the 43 bytes of actual content. Anywho - the trick to what you are asking is to pad the bottom of your content area equal to the height of the footer... By doing so if it overlaps, it's not a problem because you made the space for it ahead of time.