Turn an Entire DIV into a Clickable Link
Here we assign an absolute position to the inner <a>
tag such that it occupies the entire DIV and we also set the z-index property to 10 to position the link above all the other elements in the DIV. This is the easiest approach and the semantic structure is maintained.
div.box { position: relative; width: 200px; height: 200px; background: #eee; color: #000; padding: 20px; } div.box:hover { cursor: hand; cursor: pointer; opacity: .9; } a.divLink { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ }