How to Create Hyperlink DIV Elements

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:
Continue reading “How to Create Hyperlink DIV Elements”