HTML - how to make an entire DIV a hyperlink? [dup

Question

This question already has an answer here:

• Make a div into a link 24 answers

How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:

<div class="myclass" href="example.com">
    <div>...</div>
    <table><tr>..</tr></table>
    ....
</div>

And whenever someone mouse hovers of the myclass DIV, I want the entire DIV it to be a clickable hyperlink.

Answer 1

You just need to specify the cursor as a pointer, not a hand, as pointer is now the standard, so, here's the example page code:

<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>

and the example CSS:

#smallbox {
    cursor: pointer;
}

So the div is now a clickable element using 'onclick' and you've faked the hand cursor with the CSS...job done, works for me!

Answer 2

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';">&nbsp;</div>

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>

Answer 3

Add an onclick to your DIV tag.

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/

Answer 4

You can put an <a> element inside the <div> and set it to display: block and height: 100%.

Answer 5

Why don't you just do this

<a href="yoururl.html"><div>...</div></a>

That should work fine and will prompt the "clickable item" cursor change, which the aforementioned solution will not do.

Answer 6

This is a late answer, but this question appears highly on search results so it's worth answering properly.

Basically, you shouldn't be trying to make a div clickable, but rather make an anchor div-like by giving the <a> tag a display: block CSS attribute.

That way, your HTML remains semantically valid and you can inherit the typical browser behaviours for hyperlinks. It also works even if javascript is disabled / js resources don't load.