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.

I have a good working example based on the most voted answer. Check the fiddle [here](http://jsfiddle.net/mrivasa/TK69d/) — Miguel, Apr 30 '14 at 16:08
In HTML5 it is perfectly valid to have a `div` under an `a`. — Juan A. Navarro, Aug 08 '14 at 14:51

thepeer · Answer 1 · 2017-12-04T11:34:54.320

780

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

edited Dec 04 '17 at 11:34

answered Aug 16 '10 at 14:32

thepeer

8,190
2
18
13

Great solution, used it for a 'lightbox' using pure CSS3 that allows users to click the darkened area and transition back to the previous fragment. – Josh Mohan Sep 06 '11 at 20:44
13

Thanks works well. If things break horribly (like they did for me) in IE8, make sure you have an opening and closing span tag (), instead of an empty span (). – Campey Nov 11 '11 at 14:32
1

The code doesn't work entirely in IE7/8, other elements that are selectable take precedence over the `` element. I.e. images and texts inside the container won't link even if the z-index is set. – Spoike Mar 01 '12 at 10:00
1

In order to [get it to work for old IE](http://www.ngenworks.com/blog/ie_z_index_and_making_a_div_a_link/) you need to set the span's `background-image` to an empty gif. – Spoike Mar 01 '12 at 10:28
80

A fiddle for people who are silly like me and misread something so had to play around with it a bit: http://jsfiddle.net/hf75B/1/ – AlexMA Jun 23 '12 at 21:46
I came by with a similar solution in a user style that I'm writing. Since I cannot change the markup I wanted a valid, CSS-only, solution. I used the `:after` pseudo-element with blank content (`content: "";`). I did not check this one thoroughly for cross-browser compatibility as I only need this to work in Firefox. The rest is just about the same as suggested in your solution. – MasterAM Aug 14 '12 at 13:10
Personally, I use as a rule of thumb. – Patrick Sep 05 '12 at 15:05
7

Have you tried this in IE9? I like this method, and I am using it, but I just tested it (including the fiddle from @AlexMA) in IE9, and what I'm seeing is that you can click anywhere in the div EXCEPT on the text. When you hover over the text, the cursor changes to a standard text cursor and it does nothing when you click on the text. As users are prone to click on text elements (and when the text elements fill up most of the div), it makes this solution unusable in IE9. Has anyone else experienced this or have a solution? – bigmac Sep 12 '12 at 22:03
Adding just the background-image line to my
worked perfectly to make the area clickable in IE. This was for existing code that I couldn't refactor on a short schedule.
– Neil Oct 21 '12 at 00:36
If there are nested DIVs, how will it know which one to make clickable? – Nathan H Nov 29 '12 at 13:51
It will be the innermost div with position: relative – thepeer Nov 30 '12 at 12:51
1

Problem I'm running into is making other links within the div clickable. – jacobsimeon Jun 20 '13 at 16:10
@jacobsimeon read the last point in the post. To make links within the div clickable, make their position relative and z-index greater than 1 – Talon May 11 '15 at 13:17
You don't really need to add an empty span inside the link. You can add the actual name of the link for SEO, then hide it using `text-indent: -9999px; overflow: hidden;` – Benjamin Intal Sep 14 '15 at 10:55
2

I was stuck on this for a while, and found out that my wrapping div had to have `{ position: relative }`. – villy393 Oct 17 '15 at 12:01
1

An issue with this solution is that it blocks any element behind the link overlay to receive a hover effect. If you have :hover style on any element inside, that style will never trigger. – Mathias Feb 19 '16 at 12:16
Pretty sure you can fix that using z-index, the same way you would other links inside the box – thepeer Feb 19 '16 at 13:20
Very interesting solution. I was nearly there apart from the span tag in the a tag. Thanks for a really good solution – user3759531 Feb 26 '16 at 23:15
2

Does anybody know how to have :hover css work with this solution? Perhaps referring the answer put in the fiddle? – nktokyo Mar 25 '16 at 05:52
@nktokyo did you ever find an answer to your question -- getting :hover to work with this solution? – user4584963 Sep 07 '16 at 03:08
I was able to make this work without putting `position: relative` on the panel `
`. What am I doing right?
– aalaap Nov 28 '17 at 06:43
Great answer. Just wondering why i need the nested span element. Why cant i apply the css on the element itself. – Yossi Sternlicht Aug 04 '20 at 11:44
@JoeStarbright because you want the text inside that to be somewhere in the body of your div. – thepeer Jan 06 '21 at 16:57
For those who still struggle with showing the pointer, this addition worked for me `pointer-events: auto` – Sahar Jul 16 '21 at 09:00
Not being able to edit the div this worked: By adding padding and equal amounts of negative margin you can 'expand' the area that is clickable on the tag. For example: if an tag is in a list of
elements and each is has an icon before it and a after it. To cause the icon and the span at either side of the element to be clickable i added this css: padding-left: 25px; margin-left: -25px; padding-right: 30px; margin-right: -30px;
– aalesund Feb 10 '22 at 09:46

score 283 · Answer 2 · edited Apr 09 '14 at 06:33

283

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.

edited Apr 09 '14 at 06:33

Claudio

884
1
15
31

answered Apr 28 '09 at 03:20

Soviut

88,194
49
192
260

13

However, this doesn't make a 'div' into a link. It makes a link into a block element. It's a bit different. – jjnguy Apr 28 '09 at 03:35
You could make a span a block element too, but there is a reason for different HTML elements. – jjnguy Apr 28 '09 at 03:36
1

This is solution of your problem. Because you can modify div can be clicked like hyperlink, but you can't set cursor(=hand) for display in all browser(only IE support it!). – Apr 28 '09 at 03:36
Using an 'a' tag for a block is like using tables for layout IMHO. – jjnguy Apr 28 '09 at 05:37
3

jjnguy: How? I dislike having lots of content in a link, but this could just as well be part of a navigation menu or something like that. An anchor element () doesn't necessarily have to be plain text, does it? In which way is it _wrong_ to make it into a block? It's semantically correct and it can be used to display it as you want. – Arve Systad Apr 28 '09 at 15:31
23

This is a perfectly valid solution to a vague question. You actually COULD simply wrap an anchor element around a div, but that would be semantically incorrect. (Block element within inline element). – Traingamer Apr 28 '09 at 18:08
3

jjnguy: This is pretty common practice. I'm not saying replace divs with links, but by the sounds of the question he just wanted a block he could click like a button or something. – Soviut Apr 29 '09 at 01:42
the solution is valid, no doubt, the the OP did not request this functionality.... – kumarharsh Aug 19 '12 at 20:56
This worked in my situation and was the best solution. I made it an inline-block and added width: 100% to stretch it across the entire enclosing div. This solved a dropdown menu problem where if the link was forced to wrap an inadvertently click simply closed the menu. – DeveloperChris May 15 '19 at 05:34
@Traingamer Maybe to *a* vague question, but not this one. This question specifically asks for how to make a *div* into a link. It is abundantly obvious that answers which don't even use `div`s cannot be a valid answer to this question. – Kröw Dec 20 '22 at 21:34
@Kröw it is incredibly vague. They didn't show any code, didn't explain why they used a div, or why they'd want to keep it a div. Nor was any reason given for wanting to wrap the div other than to make it behave like a link. They also didn't specify if they wanted to avoid javascript or not, etc. So this is very open ended which is why there are so many potential solutions provided. – Soviut Dec 21 '22 at 01:10
@Soviut That is not true at all. I reiterate that this question specifically asks for how to make a *div* into a link. The question title is short and sweet: `Make a div into a link`. Your curiosity as to why a div was used would be well-resolved through a comment, but providing an answer that escapes the question is something to have to scroll through for users who want an answer to exactly what the question is. If you have useful information that answers a different (albeit similar) question, it is recommended to open a new question and self-answer it, (and perhaps, reference this question). – Kröw Dec 31 '22 at 08:01
@Kröw Please stop cluttering up the comments with this. The question is vague and open to interpretation, otherwise there would be a single answer. For example, there's no reason given for breaking HTML semantics. Since they weren't clear about "why", offering solutions that are semantically valid is perfectly reasonable. – Soviut Dec 31 '22 at 21:03
@Soviut There is no purpose in you asking me to simply stop "cluttering the comments;" I would ask you the same thing because I think what you're pointing out is not correct (or if I think it is not relevant). Anyway, the question is vague and open to interpretation, but that does not mean I can talk about my favorite fútbol team in an answer. The question may be vague but it's still very clear what isn't an answer. Semantic validity doesn't make what you posted an answer. Your post is still a semantically valid answer to a *different* question. – Kröw Dec 31 '22 at 21:22
@Soviut Your "answer" is useful, but I strongly suggest you take the more appropriate approach of writing a new question and self-answering it when you have useful information that does not answer the existing question again in the future. (I already suggested linking the original question too. This is useful advice.) Adding a post that does not answer the question exactly does clutter up the page with answers that do not help many others with the same question. – Kröw Dec 31 '22 at 21:22
The problem with this solution is: when you put an `img` into an `a` rendered as `block`, the outer `a` and the inner `img` do not have the same height. – ceving Jan 30 '23 at 09:23
@ceving that's solved by giving the `img` a `display: block` removing whitespace characters in your HTML. However, if they were using an image, they technically don't need to do anything to the `a` since the `img` will give it block-like behaviour (despite both being inline). – Soviut Jan 30 '23 at 18:08

aelsheikh · Answer 3 · 2015-10-06T14:40:31.507

87

This is an ancient question, but I thought I'd answer it since everyone here has some crazy solutions. It's actually very very simple...

An anchor tag works like this -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo...

<a href="whatever you want"> <div id="thediv" /> </a>

Although I'm not sure if this is valid. If that's the reasoning behind spoken solutions, then I apologise...

edited Oct 06 '15 at 14:40

answered Apr 14 '11 at 01:12

aelsheikh

2,268
5
26
41

9

It's valid HTML as long as the `
` doesn't contain any interactive content (other `` elements, `
– Apr 14 '11 at 01:23
53

Your example is not valid HTML - block element contained in an inline element - *unless* you're using HTML5, which has made an exception for links. – thepeer Sep 22 '11 at 13:27
1

This is a *bad* example, because what the `a` tag does is takes all the text in a `div` and underlines it... this can be mitigated with styling, but the top answer is better. – Dmitri Nesteruk Dec 28 '11 at 13:48
2

`a #thediv{font-weight:normal;text-decoration:none;}` is all you need style-wise. – tyjkenn Jun 17 '12 at 04:21
no. just simple converting div into inline would not do the job. It is bad markup, and... just read this: http://skypoetsworld.blogspot.in/2008/10/dont-ever-put-block-inside-inline.html – kumarharsh Aug 19 '12 at 20:58
1

Tried this and it worked, however it broke the element's positioning. Yes doctype is HTML5 in Chrome (some 2014 version).. – BAR Oct 30 '14 at 01:05
not valid xhtml - you shouldn't put block elements inside inline elements, even if you change the 'display' property with css – Velimir Tchatchevsky Nov 11 '15 at 12:23
Yeah I saw a CodeAcademy course has done it this way too. https://www.codecademy.com/en/courses/web-beginner-en-f8mcL/2/2?curriculum_id=50579fb998b470000202dc8b – Bohn Mar 04 '16 at 18:38
It is a valid answer for HTML 5, but not for HTML 4- – Tohid Mar 04 '16 at 20:43
made all the `
` tags underneath turn blue. Even when setting `a text-decoration: none`
– MwBakker Oct 30 '22 at 11:26

score 75 · Answer 4 · answered Apr 28 '09 at 03:19

75

Requires a little javascript. But, your div would be clickable.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

answered Apr 28 '09 at 03:19

jjnguy

136,852
53
295
323

12

Results in bad semantics on the page though, so I'd avoid this one even though it is technically possible. – Arve Systad Apr 28 '09 at 15:29
1

Functional, but not really in the spirit of the question which is for an XHTML solution. – Soviut Apr 29 '09 at 01:44
2

I thought about using this solution, but it's kind of ugly. I like the solutions involving display: block better. – allyourcode Oct 30 '09 at 20:46
13

This looks like a link, but isn't a real link. It has severe usability and accesibility issues, and is a really nasty solution. – WhyNotHugo Jun 15 '12 at 16:39
2

Best solution. We just need to run script and send "this" to it. – Arman Hayots Aug 29 '13 at 11:18
2

If your manager tells you to do it asap tell him its bad semantics lol – vaskort Feb 12 '14 at 15:56
If it's not possible to use a anchor as a block then this is the best substitute. This way will also let you add a link without making any changes to the CSS code. – Daniel West May 06 '14 at 11:31
5

If they don't have js enabled you lost functionality. As well as being bad for SEO. – BAR Oct 30 '14 at 00:52
This doesn't give you a mouse cursor. – ABCD Aug 08 '16 at 06:27
I'm doing a single page web app. So I don't have to worry about SEO and this is the easiest solution for me. – M_R_K Jan 08 '17 at 23:15
1

@SmallChess it does for me. Best answer that completely worked for me. – Jayden Lawson Nov 08 '18 at 01:54

MagTun · Answer 5 · 2016-06-17T17:49:32.707

50

This option doesn’t require an empty.gif as in the most upvoted answer:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

As proposed at http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

edited Jun 17 '16 at 17:49

answered Feb 27 '14 at 16:25

MagTun

5,619
5
63
104

1

Thanks! Chris Jumonville's solution is working great on both Andriod and iPhone. Example: http://gastateparks.org/specials – Loren Jan 03 '15 at 13:33
1

Shouldn't it be `div.feature > a` just in case the "everything else" part also contains a link hidden deep within? – TWiStErRob Aug 07 '16 at 19:47
this should be the choosen answer, works with bootstrap too – Anthony Kal Dec 29 '17 at 06:00
1

This works beautifully, very smooth, works with screen readers nicely too, HTML5 adhering, works even if you do transforms on the parent object, and inherently makes the cursor into a pointer (as you expect for a clickable object) – Steffen Cole Blake Oct 08 '21 at 23:31

score 25 · Answer 6 · edited Jul 21 '19 at 13:30

The cleanest way would be to use jQuery with the data-tags introduced in HTML. With this solution you can create a link on every tag you want. First define the tag (e.g. div) with a data-link tag:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Now you can style the div however you want. And you have to create also the style for the "link"-alike behavior:

[data-link] {
  cursor: pointer;
}

And at last put this jQuery call to the page:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

With this code jQuery applys a click listener to every tag on the page which has a "data-link" attribute and redirects to the URL which is in the data-link attribute.

To get info about data-attributes see: http://ejohn.org/blog/html-5-data-attributes/ — Erhard Dinhobl, Sep 26 '13 at 14:14

Calvin · Answer 7 · 2009-04-28T04:04:37.007

This is a "valid" solution to achieving what you want.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

But most-likely what you really want is to have an <a> tag displayed as a block level element.

I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation, which is ultimately to promote accessibility (publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers).

It would be preferable to publish a web page that does not validate, but renders and functions properly on all browsers, including ones with JavaScript disabled. Furthermore, using onclick does not provide the semantic information for a screen reader to determine that the div is functioning as a link.

score 20 · Answer 8 · edited Feb 03 '18 at 13:43

20

Not sure if this is valid but it worked for me.

The code :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

edited Feb 03 '18 at 13:43

azro

53,056
7
34
70

answered Feb 12 '11 at 04:35

Tim

217
2
3

I have to say that this approach is as clean as a css class on your stylesheet. as far as i am concerned, this is the correct and most easy solution. – Alphabetus Oct 19 '20 at 14:14
This is the best one – Shahram Banazadeh Jun 17 '21 at 06:43

score 10 · Answer 9 · edited Feb 11 '13 at 09:33

To make thepeer's answer work in IE 7 and forward, it needs a few tweaks.

IE will not honour z-index if the element is has no background-color, so the link will not overlap parts of the containig div that has content, only the blank parts. To fix this a background is added with opacity 0.
For some reason IE7 and various compatibility modes completely fail when using the span in a link approach. However if the link itself is given the style it works just fine.

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

score 9 · Answer 10 · answered Aug 23 '12 at 17:25

9

you could also try by wrapping an anchor, then turning its height and width to be the same with its parent. This works for me perfectly.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

answered Aug 23 '12 at 17:25

wdonayredroid

431
4
3

1

You might also want to make sure the parent div has zero padding and that the tag has zero margin. – Nilpo Aug 23 '12 at 21:39

The Codesee · Answer 11 · 2020-05-13T14:17:16.033

7

An option that hasn't been mentioned is using flex. By applying flex: 1 to the a tag, it expands to fit the container.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

edited May 13 '20 at 14:17

answered May 09 '20 at 13:24

The Codesee

3,714
5
38
78

score 6 · Answer 12 · answered Mar 09 '19 at 01:17

This worked for me:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

This adds an invisible element (the span), which covers your entire div, and is above your whole div on the z-index, so when someone clicks on that div, the click is essentially intercepted by your invisible "span" layer, which is linked.

Note: If you're already using z-indexes for other elements, just make sure the value of this z-index is higher than anything you want it to rest "on top" of.

Worked for me. Just don't forget to relatively position the parent element. — Saif Al Falah, May 20 '19 at 23:44

score 5 · Answer 13 · answered Feb 19 '15 at 13:17

5

why not? use <a href="bla"> <div></div> </a> works fine in HTML5

answered Feb 19 '15 at 13:17

Vamsi Pavan Mahesh

240
1
8
30

It won't pass HTML validation. Line item cannot store block items. – Jazi Apr 17 '15 at 13:19
I mean, that `
` is valid and `
` is not. You shouldn't put `display: inline;` type of items into `display: block;` items. The `` tag is inline box. – Jazi Apr 17 '15 at 13:36
Yeah, it can work, because You can do it in multiple ways (better or worse). This particular solution is not good cause the older HTML validation :). – Jazi Apr 17 '15 at 13:44
1

Does it matter that "older HTML validation" does not pass this? It is allowed now, html5 and for a reason so why not use it? I think this solution is fine (it does often require the removal of underline to the div content but still). – Todilo Aug 28 '15 at 08:20
@Todilo Because while `
` is valid and works, `
` is not valid and doesn't work. – coredumperror Apr 17 '17 at 21:40

score 4 · Answer 14 · answered Oct 10 '13 at 11:27

4

This example worked for me:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

answered Oct 10 '13 at 11:27

joan16v

5,055
4
49
49

score 4 · Answer 15 · edited Jun 27 '14 at 12:46

This post is Old I know but I just had to fix the same issue because simply writing a normal link tag with the display set to block does not make the whole div clickable in IE. so to fix this issue far simpler than having to use JQuery.

Firstly let us understand why this happens: IE wont make an empty div clickable it only make the text/image within that div/a tag clickable.

Solution: Fill the div with a bakground image and hide it from the viewer.

How? You ask good questions, now listen up. add this backround style to the a tag

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

And there you have it the whole div is now clickable. This was the best way for me cause Im using it for my Photo Gallery to let the user clik on one half of the image to move left/right and then place a small image as well just for visual effects. so for me I used the left and right images as background images anyway!

Thanks! I needed to simulate an imagemap with empty anchors over an image and IE would only let you click if there was content. This fixed it. — MDCore, Dec 06 '10 at 13:44

score 3 · Answer 16 · answered Jul 06 '16 at 12:37

This is the best way to do it as used on the BBC website and the Guardian:

I found the technique here: http://codepen.io/IschaGast/pen/Qjxpxo

heres the html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

heres the CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

score 3 · Answer 17 · answered Nov 02 '10 at 16:27

Just have the link in the block and enhance it with jquery. It degrades 100% gracefully for anyone without javascript. Doing this with html isn't really the best solution imho. For example:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Then use jquery to make the block clickable (via web designer wall):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

Then all you have to do is add cursor styles to the div

    #div_link:hover {cursor: pointer;}

For bonus points only apply these styles if javascript is enabled by adding a 'js_enabled' class to the div, or the body, or whatever.

i want to use this but i have 2 links in the div... how can i modify it to be able click on both links? (it currently takes me to "mylink.html" if i click the second link as well..) — m3tsys, Jul 26 '11 at 11:15

score 3 · Answer 18 · answered Apr 18 '19 at 00:58

3

<a href="…" style="cursor: pointer;"><div> … </div></a>

answered Apr 18 '19 at 00:58

Phillip Chaffee

87
8

score 2 · Answer 19 · answered Aug 01 '14 at 14:56

Actually you need to include the JavaScript code at the moment, check this tutorial to do so.

but there is a tricky way to achieve this using a CSS code you must nest an anchor tag inside your div tag and you must apply this property to it,

display:block;

when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag,for example:

height:60px;

this is gonna make the whole area clickable,then you can apply text-indent:-9999px to anchor tag to achieve the goal.

this is really tricky and simple and it's just created using CSS code.

here is an example: http://jsfiddle.net/hbirjand/RG8wW/

score 1 · Answer 20 · edited Apr 09 '14 at 06:31

1

This is the simplest way.

Say, this is the div block I want to make clickable:

<div class="inner_headL"></div>

So put a href as follows:

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

Just consider the div block as a normal html element and enable the usual a href tag.
It works on FF at least.

edited Apr 09 '14 at 06:31

Claudio

884
1
15
31

answered Apr 12 '12 at 03:30

jeevanism

29
1

score 1 · Answer 21 · answered May 30 '13 at 12:49

You can give a link to your div by following method:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

score 1 · Answer 22 · answered Aug 27 '13 at 16:42

1

You can make surround the element with a href tags or you can use jquery and use

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

answered Aug 27 '13 at 16:42

THE AMAZING

1,496
2
16
38

score 1 · Answer 23 · answered Nov 06 '11 at 23:00

1

This work for me:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

answered Nov 06 '11 at 23:00

DejanR

441
4
11

score 0 · Answer 24 · edited Apr 19 '12 at 23:42

0

I pulled in a variable because some values in my link will change depending on what record the user is coming from. This worked for testing :

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

and this works too :

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div>

edited Apr 19 '12 at 23:42

Hari

1,509
15
34

answered Apr 19 '12 at 15:10

becky

11

1

code doesn't show for some reason I used the onclick with a jsp variable inside to create a dynamic link – becky Apr 19 '12 at 15:13

score 0 · Answer 25 · answered Dec 27 '21 at 17:06

0

Enclosing your div inside an anchor tag <a href></a> works like charm:

    <a href="">
      <div>anything goes here will turn into a link</div>
    </a>

answered Dec 27 '21 at 17:06

saran

356
1
3
14

score 0 · Answer 26 · answered Nov 27 '22 at 14:27

If you can use bootstrap, one simple solution is to use bootstrap .stretched-link.

https://getbootstrap.com/docs/4.3/utilities/stretched-link/

Sample Code

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

score 0 · Answer 27 · answered Jan 31 '23 at 08:56

0

Soviut's answer was not sufficient for me. I had to use

a { display: inline-flex; }

to remove baseline artifacts, when using just a img in the a.

answered Jan 31 '23 at 08:56

ceving

21,900
13
104
178

score 0 · Answer 28 · answered Jun 08 '23 at 15:31

Pure HTML & CSS case. No JS.

In case if you want to have other link elements inside of that fully clickable div.

Main idea is to stretch main clickable link, place it under the content, and disable clicks for content with pointer-events. For clickable elements inside of this element, set pointer-events: all; for each one.

Live demo:

<div style="
            width: 300px; height: 300px;
            position: relative;
            border: 1px red solid;
            pointer-events: none;
            z-index: 0;
            ">
  <h1>No wrapper</h1>
  <p>This is fully clickable div, click handled by anchor tag. It contains no wrapper</p>
  <button>Learn more</button>

  <p>See this link ➡️ <a style="pointer-events: all;" title="Why I see this ad?" href="http://example.com/">?</a></p>

  <a style="
            position: absolute;
            top: 0;left: 0;right: 0; bottom: 0;
            text-indent: -9999px;overflow: hidden;
            pointer-events: all;
            z-index: -1;
            " title="GO TO YANDEX" href="https://ya.ru">CLICK</a>
</div>

Codepen: https://codepen.io/ColCh/pen/OJaPpJQ

score 0 · Answer 29 · edited Jun 24 '19 at 21:16

0

While I don't recommend doing this under any circumstance, here is some code that makes a DIV into a link (note: this example uses jQuery and certain markup is removed for simplicity):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

edited Jun 24 '19 at 21:16

halfer

19,824
17
99
186

answered May 08 '09 at 00:33

Brian David Berman

7,514
26
77
144

3

Again, this is a functional solution, but not really in the spirit of the original question which was for an XHTML solution. While not a huge deal, your answer *does* start to add noise to the question. – Soviut May 08 '09 at 01:10

score -2 · Answer 30 · edited May 05 '12 at 07:54

-2

My smarty pants answer:

"Evasive answer to: "How to make block level element a hyperlink and validate in XHTML 1.1"

Just use HTML5 DOCTYPE DTD."

Didn't actually hold true for ie7

onclick="location.href='page.html';"

Works IE7-9, Chrome, Safari, Firefox,

edited May 05 '12 at 07:54

Hailei

42,163
6
44
69

answered May 04 '12 at 21:31

Karl Kelman

11

he was looking for "I am looking for an XHTML 1.1 valid way" – Mark Oct 20 '12 at 23:30

philipp · Answer 31 · 2009-12-02T00:31:02.267

-4

if just everything could be this simple...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

just think a little outside the box ;-)

edited Dec 02 '09 at 00:31

answered Dec 02 '09 at 00:18

philipp

15
1

Make a div into a link

31 Answers31

Linked

Related