Make a div into a link

anchor, css, html, xhtml

Solution

Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.

For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.

In essence it's this:

- Build your panel using normal CSS techniques and valid HTML.

- Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).

- Inside that link, put an empty span tag (`<span></span>`, not `<span />` - thanks @Campey)

- give the panel position:relative

apply the following CSS to the empty span:

{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}   

It will now cover the panel, and as it's inside an `<A>` tag, it's a clickable link

- give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link

Problem

Original source