Attaching an image to the inside bottom of a div

[Jobarr]

I have a box that takes up 90% of the window height. I have some content in the box and I want to then have a footer image attached to the inside bottom of the box which will stay attached even if the window is resized.

So, I have something like this:

<div id="wrapper" style="height: 90%;">
<div id="content"> content here </div>
<div id="footer"> image here </div>
</div>

Right now, the footer just shows up directly below the content, but I want it to be attached to the end of the wrapper, that is...I want white space in between the content and the footer, not after the footer. Is this possible? If so, how?

Thanks! :)

[DrDoc]

Welcome to Webmaster World!

#footer {
position: absolute;
left: 0;
bottom: 0;
}

[Jobarr]

Thanks for the welcome ;)

That just makes the image go to the bottom left corner of the screen. I want it to go to the bottom left corner of the div that it is containted in (bottom left of "wrapper").

[grahamstewart]

that will work if the wrapper itself is also absolutely positioned.

[Jobarr]

Hmm, if I do it that way, the image will cover the content if the window is made too small.

[SuzyUK]

Hi and Welcome

Don't know if I've got this but you have two questions here?

1. the image as a footer background
2. making the content div fill the page even if there's not enough content. (make the whitespace appear before footer)

if so solving the 2nd problem will enable you to put the image into your footer div or make it a background to it as normal..

to solve the 2nd question you require to use a bit of a workaround using min-height which IE doesn't support, but it will happily do what you want by height..

see CSS Page height workaround [webmasterworld.com] thread.. it would also apply to making your content div a min-height, doesn't have to be 100%..

Is that what you're getting at? if not post again

Suzy

[drbrain]

Another option is to use a background image:

#footer { background: url(your_image.png) no-repeat bottom left }

[Jobarr]

Suzy, I just have one question really. I have no problems getting the page to be 90% of the height (I set the min-height to 90%, and use a IE conditional comment to set the height to 90%, this works in all browsers I have tried). The problem is when the wrapper div is that long but the stuff inside it isn't, I cannot find a way to put an image at the bottom edge of the wrapper.

No suggestions so far have worked.

[Jammer]

*reply deleted after reviewing it*