Question

Something similar to this:

Just an image and a link to somewhere.

Here’s something I whipped up, but can’t seem to make it work as the picture.

http://jsfiddle.net/stapiagutierrez/z6LBL/6/

#portrait {
    border:1px solid red;
    height:100px;
    width:100px;
}

#portrait .image {
    float:left;
    height:100px;
    width:100px;
}

#portrait a {
    float:right;
}

<div id="portrait">
    <img class="image" src="http://media.giantbomb.com/uploads/14/141112/1983897-307865_10150294906295771_529235770_8254698_904096888_n_large.jpg" />
    <a href="#">alterar foto</a>
</div>

Answer 1

The trick is to use position:relative on the container and position:absolute on your anchor. Because the anchor is inside a position:relative box, it’s top, left, right, and bottom properties are relative to the portrait div and not the whole page. Check out CSS Positioning for more detail about the position property.