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; }

4 responses to “CSS: How to pin an image to the bottom of a DIV”

  1. Avshash says:

    you are a legend! thanks!

  2. nesa says:

    Thanks! You solved my problem.

  3. Mike says:

    Brilliant! Many thanks…

  4. Saeed says:

    Thanks. simple and usefull.