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?

Solution 1

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)

Solution 2

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>

Solution 3

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

Solution 4

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.
}

Solution 5

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;
}

View more solutions

Comments

[Joseph Marikle]

just add a click event listener to the div?

[Jon P]

Define valid code? With or without JavaScript?

[unrelativity]

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.

[Andy Lobel]

does html and css include javascript? dont think so

[Kai Qing]

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.

[Alex Norcliffe]

@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.

[Nightfirecat]

Just make the <a> a block element.

[Vamsi Pavan Mahesh]

having a div inside inside <a> is valid from html5

[Silidrone]

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.

[aalesund]

By adding padding and equal amounts of negative margin you can 'expand' the area that is clickable on the <a> tag. For example: if an <a> tag is in a list of <div> elements and each <a> is has an icon before it and a <span> after it. To cause the icon and the span at either side of the <a> element to be clickable i added this css: padding-left: 25px; margin-left: -25px; padding-right: 30px; margin-right: -30px;

[Esailija]

While I normally don't encourage inline handlers, in this specific situation it might actually be the best option

[Andy Lobel]

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 (:

[Alex Norcliffe]

OP asked for "valid code" (I assume they meant valid markup) - nesting a tags inside divs is not valid.

[Alex Norcliffe]

OP asked for no javascript

[Alex Norcliffe]

OP asked for no javascript

[Josh Foskett]

@AlexNorcliffe He edited his post after I submitted the answer.

[Damien]

As of HTML5, having a <div> inside an <a> 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". dev.w3.org/html5/markup/a.html#a-changes

[sventechie]

See this page to make it work properly in Internet Explorer (basically just set the width or height to 1%: v3.thewatchmakerproject.com/journal/154/…

[David Taiaroa]

brilliant @Damien, you are correct. <a href="#"> <div></div> </a> is valid HTML5. Thank you for simplifying my life!

[dialex]

@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?

[Josh Foskett]

@DiAlex This should work for you. jsfiddle.net/mdc2h

[dialex]

Thx! I ended using something very similar, also using the click event: $("#div-id").click(function() { location.href = "./page.html"; });

[Michael Dorst]

You of course mean "only HTML and CSS".

[showdev]

This doesn't add any "clickable" functionality. It only changes the cursor.

[Bruno]

True. Worked for my purposes :))

[showdev]

OP specified "without javascript".

[showdev]

The OP specified "without javascript".

[showdev]

Where's the <div>? This doesn't seem to answer the question.

[MW.]

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...

[Scott Stafford]

I believe the 1% hack is needed only for <= IE6, possibly IE7. Anyone know for sure?

[Luke Griffiths]

Updated URL for document Damien is referencing: w3.org/TR/html5-diff/#content-model, then text search "The a element now" to locate on page

[Brent]

The amount of time I've used this answer, sets me back at-least two years saved my skin a few times! Thanks again

[Doyle Lewis]

He added display:block to his a tag, making it behave like a div. It gets you the same result.

[João dos Reis]

Brilliant, and standards-based.

[Kashif]

Thanks, this saved me a day

[David]

This one i think is the best ;)

[redfox05]

As has been stated on other answers above, divs inside a tags are now valid html5. w3c.github.io/html-reference/a.html#a-changes

[redfox05]

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'

[Buttle Butkus]

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.

[Cindy Turlington]

great answer, thanks !

[Chiwda]

Doesn't this solution create a potential problem for other <a> tags in the document? I may not want all my <a> tags redefined like this. As noted by @Damien the <div> inside an <a> seems the most elegant.

[Brackets]

Won't only text part be clickable?

[Sinan Erdem]

no, the whole container area will be clickable because <a> covers all the area inside container.

[Buddy]

Make sure that <a> tag doesn't contain another <a> tag in it. Otherwise, the <div> inside <a> won't be clickable.

[Co ti]

credits: thomas.vanhoutte.be/miniblog/…