Here is my html

<div class="container">
   <img src="something" class="avatar"/>
   <div class="edit_photo">Edit</div>
</div>

"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.

Thank you!

The container should be position: relative; and the edit_photo position: absolute; like this:

.container {
    position: relative;
    /* inline-block for 100% of child width */
    display: inline-block;
    border: 3px solid #ddd;
}
img {
    /* for 100% height of the container */
    display: block;
}
.edit_photo {
    position: absolute;
    right: 5px;
    bottom: 10px;
    /* Some color */
    background: red;
    padding: 2px 4px;
    border-radius: 3px;
    color: white;
}

UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/

more