Make a div into a link

Question

I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link.

I'm looking for something like <a href="…"><div> … </div></a>, but that is valid XHTML 1.1.

Answer 1

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

Answer 2

You can't make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.

a {     display: block; } 

You can then set the width and height on it.