Make the whole div clickable instead of the links inside of it

Question

So i'm making some grids to show products in and would like to make the whole div tag clickable instead of just the hyperlinks inside of it.

What would be the best and easiest way to do this. I found some complicated solutions which i rather not use since i have a lot of these divs i want to make clickable.

Any suggestions are very welcome!

Answer 1

Not sure what complicated examples you're talking about but you will need to use something like jQuery:

Give the div a class:

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

and in page load, hook up the handler with a selector:

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

See http://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Answer 2

You can make the whole div clickable instead of just content inside it. Just put like this :

<a href="http://www.google.com"><div id="mydiv"> Blah Blah </div></a>

That's it. Here is JS Fiddle : JSFiddle