How can I get an image to stick to the bottom of a div as the height of the div changes?

Question

I have a div, with an image that needs to be stuck to the bottom-right corner. This is easily done with:

#div1 {
    position: relative;
}

#div1 img {
    position: absolute;
    bottom: 0;
    right: 0;
}

However, the height of the div changes dynamically as pieces of a series of nested lists show and hide themselves on hover events. When the height of the div changes, the image remains where it was placed when the page loaded. How can I get the image to move with the bottom of the div as it shifts up and down?

Answer 1

A thought: fake it with a borderless table with two rows: the div section in the first row, the image in the second.

Answer 2

This is not supposed to happen. You have a bug somewhere else in your code.

Answer 3

Do your div height really changes when its content changes ? We'd need some more code (html, js and css).

Answer 4

You should break your up your div into corners and have them individually contained in an outer box element. This is basically like a website; with a header, body, and footer. At all costs, don't use Javascript.

Check out this example from Nitfy Corners: http://www.html.it/articoli/nifty/index.html