when a container needs to be a clickable link

Question

I'm not quite sure the best way to deal with this situation. Here's a hypothetical situation:

<a href="/my-page/">
    <div style="width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;">
        <div style="line-height: 50px; position: absolute; bottom: 0; left: 0;">
            <span>My Clickable Box</span>
        </div>
    </div>
</a>

So in this situation, I have a container with another container positioned at the bottom for the actual text...but I need the entire box to be clickable.

As we all know, an anchor tag does not do well when you tell it to be a specific height or width...so you pretty much rely on the inner content to do so.

I don't know, I'm at a bit of a loss on this one.

Answer 1

If you change its display to block or inline-block you can size it, no need to use divs inside which I'm pretty sure is invalid.

<a style="display:inline-block;width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;" href="/my-page/">
    <span>My Clickable Box</span>
</a>