making a div a link

[WmTn]

I use span instead of div.
Seems to work fine and validate XHTML Strict....

<a href="http://"><span class="" style="height:7 3px; width:150px;"></span></a>

Been using it for some time now since I found that using the div inside the link tags doesnt validate.
No problems whatsoever so far.

[kovik]

Double-necro'd. And with absolutely nothing new to add. Bravo.

[Dave Wouters]

2 possible solutions

Hi everyone,

Two possible solutions:

1) Put the link inside the <div> and wrap all inline elements within the link in <object> tags. So like this:

<div>
<a href="#">
<object><h3>Header text here</h3></object>
<img src="#">
<object><p>Paragraph text here</p></object>
</a>
</div>

This validates and everything within the <a> tag now becomes clickable. You don't have to put blocklevel elements (like <img>) within <object> tags to make this validate.

2) You can put your link inside a <span>, which is inside the <div>. You can then add a transparent image the size of the block you want to be clickable to the link (a completely transparent png or gif will work) and position this absolutely over the <div>. So like this:

<div>
<span><a href="#"><img src="transparent.png" width="200px" height="150px"</a></span>
<h3>Header text here</h3>
<img src="#">
<p>Paragraph text here</p>
</div>

To make it work you give the <span> the same width and height (using CSS) as your transparent image. So the CSS for the <span> would look something like this:

span {
width:200px;
height:150px;
position:absolute;
}

In order for the absolute positioning to work you need to position the containing <div> relatively. So the CSS for the containing <div> would look something like this:

div {
position:relative;
}

Hope this helps...

[drhowarddrfine]

Maybe we can continue this thread another 3 years from now.

[SalcWeb]

Simple answer, put a blank transparent PNG inside the div, set it to the same height and width as the div and link the image.

It's a bit heavy handed, but it works.

[kovik]

Seriously...? Just put an inline-level element in the anchor and use CSS to make it a block. It's not nearly as complicated as you guys are making it. When someone has CSS turned off, it means that they don't care what the page looks like. They don't need block-element links.

Now please... Let the thread die?

[luciminea]

The problems are simple. YES a div can be a link, those who doesn't know it yet, should learn some more. The html code for this is as simple as you wrote initialy:

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

But for this to work, should have in the .css file as a rule for you div, the folowing: a given height, a given width, and the rule display:block, but not for <a> element, but for "someclass" element.

Do that and I gurantee this work without a single problem.

For the list problem (ul and li) I wouldn't sugest you use this technique, better explain exactly what you want to achieve, and we'll help you with the right solution.

[drhowarddrfine]

Almost five years ago, WHEN THIS THREAD ORIGINALLY STARTED, trying to make a div a link was invalid. It has only been possible and valid to do with HTML5.

[luciminea]

Oh my god ! My bad, I didn't look at the date, my apology.

[kovik]

The thread that never dies. At least it gives me a reason to check up on Bytes and read how much of a **** I used to be. Good times, man. Good times.

[rybo111]

Maybe we can continue this thread another 3 years from now.

No worries.

HTML:

<div class="inner-link">
  Go to <a href="https://google.com">Google</a>
</div>

jQuery:

$(".inner-link").click(function() {
  window.location = $(this).find("a").attr("href");
});