Clever Geek Handbook

How can I get the image to stick to the bottom of the div when the div's height changes?

I have a div with an image that needs to be pinned to the bottom right corner. This can be easily done with:

#div1 {
    position: relative;
}

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

However, the height of the div changes dynamically as fragments of a row of nested lists show and hide on hover events. When the div's height changes, the image stays where it was placed on page load. How can I get the image to move with the bottom of the div as it moves up and down?

+2


source to share


4 answers


This shouldn't happen. You have a bug somewhere else in your code.



+1


source


Thought: fake it with a borderless table with two lines: div section on first line, image on second.



+1


source


Does your div height actually change when its content changes? We need some more code (html, js and css).

0


source


You have to split your div into corners and have them individually in the outer box element. It's basically like a website; with header, body and footer. By all means, don't use Javascript.

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

0


source






More articles:


All Articles