Home/ Questions/Q 6063549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:10:42+00:00

I’ve set up my problem here . I have 2 divs, each outlined with

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0