So, the thing is a really usability concept. Most of us have been working with a div, and to make entire div a clickable box, through javascript assign the onclick event and css pointer cursor. But today you will learn a really interesting thing, without javascript and really much usable than that one. And is working with IE.
So before you had used something like:

 
<script type="text/javascript">
	$('#item').css("cursor", "pointer").click(function(){
		// do something like
		window.location = 'somepage.html';
	});
</script>
<div id="item">
 
Some text
<ul>
<li>Some</li>
<li>List</li>
<li>Items</li>
</ul>
 
	<img src="some-image.gif" alt="Some image too" />
</div>
 

If you are a little dumb, like me, you might had tried:

 
<a href="gothere.html">
<div>content goes here</div>
 
</a>
 

But that is not W3 valid! Anyway it doesn't work fine.
NOT ANYMORE!! With that example you might see everything goes OK, but what about SEO? what about javascript-disabled browser? Also, what about "third click" on Firefox? (I mean to open it in a new tab like clicking the scrollwheel)
You can use my pretty fix without any piece of javascript. Just using CSS + HTML (valid!)

 
<div class="mybox">
	<a href="gothere.html" class="makeit"></a>
 
Some text for a paragraph
<ul>
<li>Some</li>
<li>List</li>
<li>working</li>
<li>linked items</li>
</ul>
</div>
 

Which is really valid content. And set in your CSS

 
.mybox{
	/* add your style */
	background:#fff;
	padding: 10px;
	/* but dont forget next lines */
	position:relative;
	width:200px;
	height:200px;
}
.mybox .makeit{
	background-image: url(fake_image.gif); /* fake_image doesnt have to exist, this is a fix for IE */
	display: block;
	height: 100%;
	position: absolute;
	margin: -10px; /* some negative margins if you are using padding in .mybox */
	width: 100%;
	z-index: 10;
}
 

Simple huh? And that is working properly like it must do. Awesomeness. Feel free to comment if you need help with this piece of code