Today, I encountered a problem: making div element a hyperlink. For example:

<a href="http://www.onurguzel.com/"><div>content</div></a>

It works, but SHOULD NOT be used. Because it is against the web law: W3C (X)HTML specifications!

A very basic (and valid) solution:

div a { display: block; height: 100%; }

<div><a href="http://www.onurguzel.com/">content</a></div>

However my case was a little bit more difficult:

<a href="http://www.onurguzel.com/">
	<div id="first">
		<div>some content</div>
		<div>some other content</div>
	</div>
</a>

We already know that is not a valid layout. Because a block element (div) is used in an inline element. If I change layout, a have to insert hyperlink tags (a) in all block elements, and the background of the “first” div element will not be clickable. So here comes the solution:

a { display: block; }
a span { display: block; }

<a href="http://www.onurguzel.com/">
	<span id="first">
		<span>some content</span>
		<span>some other content</span>
	</span>
</a>

It’s done! And it’s VALID!