I am forced to use a company standard WebPage object that includes our header with menus and a standard footer. But because of the DOM structure, the footer floats up and down the page and it's driving me crazy. In order to fix this, I need to change the DOM structure. The standard structure looks like this:
Crap. Stupid mistake. I misunderstood the sites I've been looking at like here and here. I always end up with a fixed footer with the page content scrolling underneath the footer and it looks terrible. Using position:fixed or position:absolute doesn't seem to allow the footer to move down when the page content extends beyond the footer.
So maybe I need to insert a wrapper container around the header and main content and then the footer.....back to the drawing board....
btw, thanks for getting pointed back in the right direction. I came up with this idea last night while working in the garden and tried to do it first thing this morning. I think I need more coffee before I start writing code...
Joined: Nov 08, 2001
set a min height on the wrapper element. Most normal layouts would call that area content.
Got it! That second link in my previous post was the most helpful, I just had to read it more carefully. Now my footers stay where they are supposed to. I think that "push" div was the key to avoiding the "content under the footer" problem. For future reference for others, this is the css I ended up with.