CSS: How to pin an image to the bottom of a DIV
If you’d like to pin an image to the bottom of a DIV, it is a bit tricky. There is an relatively un-known property of an absolutely positioned element — if you wrap it in a relatively positioned element, the absolute positioning of the wrapped element will be positioned relative to the wrapper rather than absolutely in the browser window. Below is an example of how to pin an image (or any other element) to the bottom of a DIV. Note that the height on the imageWrapper is only there to illustrate that the image will attach to the bottom of the taller wrapper and is not required.
HTML:
<div id="imageWrapper">
<img src="image.jpg" width="100" height="100" id="bottomImage" alt="Some Image" />
</div>
CSS:
#imageWrapper { position: relative; height: 500px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0; }
you are a legend! thanks!
Thanks! You solved my problem.
Brilliant! Many thanks…
Thanks. simple and usefull.