How to make an entire div clickable with CSS [closed]

Question

Sometimes you want to make an entire div (or other element) into a clickable link. Here’s an example.

Here’s a cross-browser way to do it using pure CSS:

HTML:

<div class="clickable">
    <a href="URL_OF_LINK_TARGET"> </a>
    Rest of div content goes here
</div>
CSS:

div.clickable { /* Containing div must have a position value */
    position:relative;
}
div.clickable a {
    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=1); /*workaround to make clickable in IE */
}

First, give the containing div position. That way, when we apply “position:absolute;” to the link (see next paragraph) it will position itself relative to the containing div.

Next, make the link absolutely positioned and the full size and depth of the containing div. The link’s z-index makes sure it’s above everything else in the div, so no matter where you click, you’re clicking the link.

IE, naturally, has quirks. In this case, IE requires a background color for such a link to be clickable, so we give it a background color (white), set the opacity to 0, then give it an IE-only opacity of 1% using IE’s proprietary filter property.

Finally, put whatever content you want in the div. If you’re going to be layering the content using z-index, just make sure not to give any element a higher z-index than the link.

Differential

Nice. What's the question? – Cuss

So what's the question? Stackoverflow is no forum, it is to ask questions, not to post solutions. – Riedel

If you want to post both a question and an answer, that's fine, but the way to do it is to post the question as a question, and post the answer as an answer. You can then accept your own answer as being correct. The FAQ says "It's also perfectly fine to ask and answer your own programming question" (but you're expected to format it as a question and an answer). – Deuce

Answer 1

You can wrap a div in a link and it is valid HTML5.

<a href="#">
      <div></div>
</a>

Pecoraro

FWIW: Wrapping block-level elements in A element may lead to issues in some old (pre-HTML5) browsers due to their obsolete error-correction algorithms that treat link wrapping a block-level element as a syntax error. I can't provide exact versions (probably IE7/8), but last time I've tried to wrap a block-level element (like DL) in A element (like <a href="#"><dl><dt>...</dt><dd>...</dd></dl></a>), I was not be able to style it consistently across browsers, so I have been forced to replace DL/DT/DD with multiple inline-by-nature SPAN elements placed inside link. – Fisticuffs