I use this trick a lot. Often I'll have an box with an H tag and an area below it with some detail text. I want to make the whole box clickable based on the link in the H tag. Here's an example of what I'm talking about:

The HTML for this box is simple:

<div class="section">
    <h3><a href="/link/to">Section Title</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non est vel neque ornare porta. Donec convallis. Nam odio felis, euismod quis, molestie sed, auctor quis, purus. Donec eu dolor.</p>
</div>

I'll leave the CSS up to you, but be sure to include at least this section, which forces the link to fill the entire H area:

.section h3 a {
  display: block;
}

Adding this simple jQuery makes the whole area clickable, linking to the same page as set in the H tag.

$(".section").click(function() {
  window.location = $(this).find("h3:first a:first").attr("href");
});

If you want to get fancy you can also add a hover effect:

    $(".section").hover(
      function() {
        $(this).addClass("hover");
        $(this).append('<div class="learn-more">Learn More</div>');
      },
      function() {
        $(this).removeClass("hover");
        $(".learn-more").remove();
      }
    );

The original box above is an example of all this put together.