Making a footer not rise above the bottom of the screen without extraneous markup

Question

If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML not rise above the bottom or the screen (and go lower

Answer 1

First of all, no matter what you do, you'll need a wrapper div for the entire page. I usually call it #page_container or something. If you think about it, having a div container for the whole page doesn't defeat the essence of css style sheets. On the other hand, if you had a bunch of wrappers scattered around the html page, it could potentially get pretty messy with all that extra markup. So, I always use a page_container on my layouts, even if I don't put any css styling on it, I always have one. Basically, it will just act like a body tag, only allow you to style it.

With that said, there are a couple solutions if your layout was refined to:

...


    

    

    

Only Firefox you say? Did I hear that right? I don't think I've ever heard anyone say that before. In that case, its fairly easy. The easiest solution would be:

    
        


    

        
Title of your page
        

            Foo bar baz

            Foo bar baz

            Foo bar baz

            Foo bar baz

            Foo bar baz

            Foo bar baz

        
        
This is a footer
    

I've been experimenting with some other css styling, and I think I almost have a layout that could be cross-browser compatible. I'll post it if I'm not too late.