CODEWITHSUNDEEP
css
scmccarthy22
scmccarthy22

Reputation: 631

Footer in positioning other than absolute or fixed?

I've set up my problem here.

I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.

Any ideas? Thanks much in advance!

Upvotes: 0

Views: 82

Answers (1)

Philip Ramirez
Philip Ramirez

Reputation: 2972

Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).

Here's an example (you can view it at http://ve.savantcoding.com/example.html)

<html>
<head>
    <title>sample footer</title>
    <style type="text/css">
    * {
        margin: 0;
    }
    html, body {
        height: 100%;
    }
    #wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -200px; /* bottom margin is negative footer height */
    }
    #content {
        padding-bottom: 200px /* bottom padding is footer height */
    }
    #footer {
        height: 200px;
    }
</style>
</head>
<body>
<div id="wrapper">
    <div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>

Upvotes: 1

Related Questions