8

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.

Emil Morris
  • 121
  • 2
  • 2
  • 5
  • 2
    Nice. What's the question? – bbill Jun 27 '13 at 22:36
  • 1
    So what's the question? Stackoverflow is no forum, it is to ask questions, not to post solutions. – MOTIVECODEX Jun 27 '13 at 22:37
  • 4
    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). – RichieHindle Jun 27 '13 at 22:40

1 Answers1

28

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

<a href="#">
      <div></div>
</a>
Michael Terry
  • 321
  • 3
  • 4
  • 3
    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 `
    ...
    ...
    `), 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.     – Marat Tanalin Jun 27 '13 at 23:03