position DIV to absolute page bottom?

[Fiasst]

Hi, I know I've managed this before but I can't seem to get a DIV to sit at the very bottom of my site (not the bottom of the screen).

Here is the CSS im using and the simplified HTML:

#wrapper {
background: #fff;
width: 777px;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
#bkgdb {
background-color: green;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 118px;
z-index: 1;
}

<div id="wrapper">
** content **
</div>
<div id="bkgdb"></div>

What am I doing wrong?

[Xapti]

There's numerous ways. Using your current code, put #bkgdb inside #wrapper, assuming the wrapper contains content. #wrapper will then also need some padding-bottom, the same height as #bkgdb.

The problem with using absolute positioning though, is that if it increases larger than the window size, it will not scroll (unless you had a whole bunch of OTHER content that goes as high as it). You would have to specify a height (in percentage or absolute units), and then an overflow behaviour.

The best way would be to not use the current code you're using. Simply placing the footer after all your other code should put it at the bottom of your content, assuming the content isn't absolutely positioned (because absolute positioning doesn't take up flow).

Since I don't know the other design requests you want for your site, I'll tell you to take a look at various web page layouts posted on this site, or other places on the web. It shows various ways to accomplish things you might want... such as side bars and other things.

[Fiasst]

Thanks for your reply. I've tweaked my layout to get the desired effect I was after.

I was making like dificult for myself..

Cheers anyway!