ansaurus

Question

Answer 1

+1 A:

First of all, to create a shadow effect use CSS. If CSS solution isn't what you're looking for then maybe try to set a shadow as a background image of .container. Right now your mark-up is overloaded by unnecessary elements.

But if that extra mark-up is the only way to do what you want to do, then try something like this:

* {
    margin: 0;
    padding: 0;
}

html, body, .shadow, #container {
    min-height: 100%;
}

#container {
    position: relative;
}

#content {
    padding-bottom: 55px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;

    background: #0a0;
}

And HTML mark-up (these shadow divs make it look terrible):

<body>
    <div id="shadow-left" class="shadow">
        <div id="shadow-right" class="shadow">
            <div id="container">
                <div id="content">
                    Page contents
                </div>
                <div id="footer">
                    Footer
                </div>
            </div>
        </div>
    </div>
</body>

Crozin 2010-01-20 21:53:44

Answer 2

A:

I really recommend using this simple solution for a "sticky footer" instead. Just gets rid of problems: http://ryanfait.com/sticky-footer/

All that it requires is for you to be able to define a fixed height for your footer, which should be no problem in virtually all cases.

Works in all common browsers!

Tom 2010-01-20 23:05:37

ansaurus

tags:

views:

answers:

Problem with css footer

related questions