clickable div with img in it?

Question

I have a div i would like to make clickable. I know i need to make the div (and?) the link have a fixed width and height + display: block. I have an image inside of the div. It seems like the 'clickable' div is actually a large transparent link and this click does not play well with images as it doesnt share space. I need to right click the image and hit save as.

So how do i make the div clickable. I tried setting the img width and height but it made the img stretch.

Answer 1

This answer is wrong! It doesn't pass HTML. I'm only keeping it up here so that other people can see it and know that it is not the answer to the question. (in case someone else had the same idea to this answer)

Why not just do something like

<a href="...">
  <div>
    <img src="..." alt="..">
  </div>
</a>

Answer 2

To actually make a div into a link you have to use Javascript but from reading more into your question I'm not quite sure this is what you are asking. But if you ever do need to make a div into a link here it is.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

It would be great if you could provide your markup so that we can see what you are seeing.

Thanks,

Answer 3

You can set the <a> tag to fill the entire parent. Example:

<div>
    <a href="..." style="display: block; height: 100%">
        <img src="..." alt=".." />
    </a>
</div>

and the entire <div> will be clickable.