How to make a whole 'div' clickable in html and css without JavaScript?

Question

I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.

If I have this which is what I want the result to do -

<a href="#">
<div>This is a link</div>
</a>

The W3C validator says that block elements shouldn't be placed inside an inline element. Is there a better way to do this?

just [add a click event listener](https://developer.mozilla.org/en/DOM/element.addEventListener) to the div? — Joseph Marikle, Nov 17 '11 at 00:06
What do you mean "clickable"? Do you want an event to fire? Or do you have some event on that div that isn't being fired on every spot on the div you could click on? There needs to be more context. — unrelativity, Nov 17 '11 at 00:07
I DO think so, buddy. It's pretty much a standard nowadays. Anyhow, a dom element is a dom element. nesting the div in an a tag shouldn't invalidate your site. — Kai Qing, Nov 17 '11 at 00:13
@KaiQing so by your reckoning, you can nest a head tag inside a body tag and that's OK? Semantic markup is there for a reason. If everything was governed by the fact that everything is a DOM element, we may as well just have one tag called object. — Alex Norcliffe, Nov 17 '11 at 01:24
*clickable* and *a link to something* is very different, I don't see how this is a duplicate. *Clickable* means it fires a click event. — Silidrone, Nov 07 '20 at 17:22
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:43
.clickableDivInsideDiv { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; text-decoration: none; } — adamcapjones, Nov 19 '22 at 20:30

score 170 · Answer 1 · edited Jan 19 '12 at 15:47

170

It is possible to make a link fill the entire div which gives the appearance of making the div clickable.

CSS:

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML:

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>

edited Jan 19 '12 at 15:47

Toto

89,455
62
89
125

answered Jan 19 '12 at 15:41

Mario

1,999
2
15
28

1

See this page to make it work properly in Internet Explorer (basically just set the width or height to 1%: http://v3.thewatchmakerproject.com/journal/154/simple-css-how-to-make-clickable-areas-bigger – sventechie Jan 04 '13 at 17:20
I believe the 1% hack is needed only for <= IE6, possibly IE7. Anyone know for sure? – Scott Stafford Jul 11 '14 at 15:48
The `a` will not fill a `td` that has padding, and I assume the same is true for a `div`. I'm not sure if there's a way around it other than removing padding from the container. Negative margins on the `a` do not help. HTML4. `a` also shrinks to nothing if it is not surrounding anything. – Buttle Butkus May 06 '16 at 01:46

score 135 · Answer 2 · answered Nov 28 '12 at 09:39

135

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

answered Nov 28 '12 at 09:39

Jamshid Hashimi

7,639
2
28
27

24

The OP specified "without javascript". – showdev Sep 17 '13 at 16:25
1

onclick uses javascript, so this is a solution to clickable divs, but not answer to the question, in which the OP asked for a method 'without javascript' – redfox05 Feb 25 '16 at 15:34
credits: https://thomas.vanhoutte.be/miniblog/making-a-div-element-clickable-in-html/ – Co ti Oct 08 '21 at 05:57

score 99 · Accepted Answer · edited Nov 22 '19 at 07:39

99

a whole div links to another page when clicked without javascript and with valid code, is this possible?

Pedantic answer: No.

As you've already put on another comment, it's invalid to nest a div inside an a tag.

However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.

If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.

Update:

In HTML5, placing a <div> inside an <a> is valid.

See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)

edited Nov 22 '19 at 07:39

xdevs23

3,824
3
20
33

answered Nov 17 '11 at 00:34

Alex Norcliffe

2,439
2
17
21

187

As of HTML5, having a `
` inside an `` tag is valid: "the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content". http://dev.w3.org/html5/markup/a.html#a-changes
– Damien Jan 03 '13 at 09:25
12

brilliant @Damien, you are correct.
is valid HTML5. Thank you for simplifying my life! – David Taiaroa Feb 22 '13 at 20:13
9

Alex, it would be good if you updated the answer to reflect Damien's comment. It's really valuable info, and it's a shame that it's hidden in a comment... – MW. Mar 26 '14 at 13:48
Updated URL for document Damien is referencing: http://www.w3.org/TR/html5-diff/#content-model, then text search "The a element now" to locate on page – Luke Griffiths Sep 16 '14 at 17:55
Doesn't this solution create a potential problem for other tags in the document? I may not want all my tags redefined like this. As noted by @Damien the
inside an seems the most elegant.
– Chiwda Dec 22 '16 at 16:56
Make sure that `` tag doesn't contain another `` tag in it. Otherwise, the `
` inside `` won't be clickable.
– Buddy Sep 15 '19 at 13:53

score 24 · Answer 4 · edited May 25 '19 at 10:12

24

Without JS, I am doing it like this:

My HTML:

<div class="container">
  <div class="sometext">Some text here</div>
  <div class="someothertext">Some other text here</div>
  <a href="#" class="mylink">text of my link</a>
</div>

My CSS:

.container{
  position: relative;
}

.container.a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; //these two lines are to hide my actual link text.
  overflow: hidden; //these two lines are to hide my actual link text.
}

edited May 25 '19 at 10:12

Tenzin Chemi

5,101
2
27
33

answered Dec 07 '12 at 10:31

Sinan Erdem

1,014
1
13
22

Won't only text part be clickable? – Brackets Oct 03 '18 at 13:40
1

no, the whole container area will be clickable because covers all the area inside container. – Sinan Erdem Dec 03 '18 at 11:44

John · Answer 5 · 2022-02-05T17:47:42.227

11

My solution without JavaScript/images. Only CSS and HTML. It works in all browsers.

HTML:

<a class="add_to_cart" href="https://www.example.com" title="Add to Cart!">
  buy now<br />free shipping<br />no further costs
</a>

CSS:

.add_to_cart:hover {
  background-color:#FF9933;
  text-decoration:none;
  color:#FFFFFF;
}

.add_to_cart {
  cursor:pointer;
  background-color:#EC5500;
  display:block;
  text-align:center;
  margin-top:8px;
  width:90px;
  height:31px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#E70000;
}

edited Feb 05 '22 at 17:47

answered Nov 18 '12 at 12:53

John

499
12
20

You of course mean "only HTML and CSS". – Michael Dorst Jun 27 '13 at 19:33
3

Where's the `
`? This doesn't seem to answer the question.
– showdev Sep 17 '13 at 16:26
1

He added `display:block` to his `a` tag, making it behave like a `div`. It gets you the same result. – Arielle Lewis Feb 05 '15 at 19:07

score 10 · Answer 6 · answered Nov 18 '12 at 13:49

Nesting block level elements in anchors is not invalid anymore in HTML5. See http://html5doctor.com/block-level-links-in-html-5/ and http://www.w3.org/TR/html5/the-a-element.html. I'm not saying you should use it, but in HTML5 it's fine to use <a href="#"><div></div></a>.

The accepted answer is otherwise the best one. Using JavaScript like others suggested is also bad because it would make the "link" inaccessible (to users without JavaScript, which includes search engines and others).

Brilliant, and standards-based. – Rob Grant Feb 27 '15 at 10:19 — Rob Grant, Feb 27 '15 at 10:19

score 4 · Answer 7 · answered Sep 17 '13 at 15:55

4

.clickable {
  cursor:pointer;
}

answered Sep 17 '13 at 15:55

Bruno

6,211
16
69
104

12

This doesn't add any "clickable" functionality. It only changes the cursor. – showdev Sep 17 '13 at 16:18
True. Worked for my purposes :)) – Bruno Sep 17 '13 at 16:21
The only way this would really work properly is to add some JavaScript, which is kind of pointless in this situation. – asciidude Nov 04 '22 at 18:51

score 3 · Answer 8 · answered Nov 17 '11 at 00:08

3

jQuery would allow you to do that.

Look up the click() function: http://api.jquery.com/click/

Example:

$('#yourDIV').click(function() {
  alert('You clicked the DIV.');
});

answered Nov 17 '11 at 00:08

Josh Foskett

4,073
5
31
35

10

OP asked for no javascript – Alex Norcliffe Nov 17 '11 at 00:43
5

@AlexNorcliffe He edited his post after I submitted the answer. – Josh Foskett Nov 17 '11 at 00:48
@JoshFoskett I would, instead of showing an alert box, to redirect to another page (like a usual href). How can I do that? I come across something like localtion.href, does that help? – dialex Mar 29 '13 at 22:27
@DiAlex This should work for you. http://jsfiddle.net/mdc2h/ – Josh Foskett Mar 30 '13 at 22:53
Thx! I ended using something very similar, also using the click event: `$("#div-id").click(function() { location.href = "./page.html"; });` – dialex Mar 31 '13 at 14:56

score 3 · Answer 9 · answered Nov 17 '11 at 00:09

3

Well you could either add <a></a> tags and place the div inside it, adding an href if you want the div to act as a link. Or else just use Javascript and define an 'OnClick' function. But from the limited information provided, it's a bit hard to determine what the context of your problem is.

answered Nov 17 '11 at 00:09

Dot NET

4,891
13
55
98

i already use this but it sais your not aloud to put block elements inside inline elements so was tryna find a good way to do it (: – Andy Lobel Nov 17 '11 at 00:18
OP asked for "valid code" (I assume they meant valid *markup*) - nesting a tags inside divs is not valid. – Alex Norcliffe Nov 17 '11 at 00:35
1

As has been stated on other answers above, divs inside a tags are now valid html5. http://w3c.github.io/html-reference/a.html#a-changes – redfox05 Feb 25 '16 at 15:31

score 2 · Answer 10 · answered Nov 17 '11 at 00:08

2

Something like this?

<div onclick="alert('test');">

</div>

answered Nov 17 '11 at 00:08

Tys

3,592
9
49
71

While I normally don't encourage inline handlers, in this specific situation it might actually be the best option – Esailija Nov 17 '11 at 00:11
7

OP asked for no javascript – Alex Norcliffe Nov 17 '11 at 00:42

score 0 · Answer 11 · answered Jan 03 '13 at 09:16

we are using like this

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
    </div>
</label>
   <label for="2"> 
<div class="options">
 <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

using

  <label for="1">

tag and catching is with

id=1

hope this helps.

score 0 · Answer 12 · answered Nov 17 '11 at 00:12

0

AFAIK you will need at least a little bit of JavaScript...

I would suggest to use jQuery.

You can include this library in one line. And then you can access your div with

$('div').click(function(){
  // do stuff here
});

and respond to the click event.

answered Nov 17 '11 at 00:12

Sebastian Oberste-Vorth

979
15
31

OP specified "without javascript". – showdev Sep 17 '13 at 16:21

How to make a whole 'div' clickable in html and css without JavaScript?

12 Answers12

Linked

Related