Question

I have a problem I can’t seem to fix.
I have a big background banner which is set to position: absolute problem is, I want my footer to constantly be underneath it – no matter what height the banner has.

An example:
Footer looks fine: http://danne-bro.com.web122.curanetserver.dk/histor.aspx
Footer NOT-fine: http://danne-bro.com.web122.curanetserver.dk/who.aspx

I have tried many many things as you can see in the sourcecode. A scraped version of what I’m trying to accomplish would be something like this:

  <div id="fit">
    <div class="wrapper">
      <div id="banner">BANNER IN HERE - Position Absolute so its always underneath</div>
    </div>
<div class="wrapper">
All content goes here - which is on top of the banner
</div>
    </div>
    <div id="footer">
    Footer in here - should float right under the banner.
    </div>

But exactly how I make the footer stay under the banner (no matter it’s height) is a problem for me. I hope I explained myself well enough.

Answer 1

You cannot float an absolute positioned element, because when you use position: absolute; your element gets out of the document flow, you need to use top, left, right, bottom to position it, floats wont work on absolute, more or less you can do is use an absolute positioned div inside a position: relative; container, or instead try using ryan fait’s sticky footer