I’m having trouble keeping the footer at the bottom of the page as the mainArea div grows…I made the footer div slightly wider than the wrapper div so you can see where it is "stuck" on the page…
I’ve read so many articles on this sticky footer thing and I can’t get it to act right with my page, but making a new example file without the stuff from my page works fine. Plus, I’m totally confused now about the min-height and everything else.
Can someone please look at my code and tell me what I need to do in order keep this footer at the bottom as the mainArea grows?
Sorry but you are going to have to rethink how you achieve your layout. All of the problems stem from your use of position:absolute on all of the divs. position absolute is a great tool and definitely has its uses but every time you use it, the item in question is taken out of the flow of the page and is, to all intents and purposes, invisible to all other items. So said items can’t flow around, or after, whatever is absolutely positioned.
You would be much better off to just build the page in the normal manner and save position:absolute for when you actually need it.