42

I have a div like this <div class="xyz"></div> and all the content in that div is in the css. How do I make that div into a link? I tried wrapping the a tag around it, but that didn't seem to work.

Thanks!!

GeekedOut
  • 16,905
  • 37
  • 107
  • 185

4 Answers4

103

You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.

<a style="display:block" href="http://justinbieber.com">
  <div class="xyz">My div contents</div>
</a>
jessegavin
  • 74,067
  • 28
  • 136
  • 164
Barry Chapman
  • 6,690
  • 3
  • 36
  • 64
  • That is a CSS property for clarification. – Barry Chapman Feb 10 '12 at 13:51
  • 16
    This is illegal, it won't pass validation. – radonys Mar 19 '13 at 23:19
  • 23
    He didnt ask for it to pass validation, he asked how to make an anchor wrap a div. – Barry Chapman Mar 20 '13 at 15:17
  • 54
    +1 For a great and absolutely relevant link – Lars Holdgaard Apr 20 '13 at 22:00
  • 1
    This solved having "open in new tab" come up when right-clicking anywhere on span instead of just the link text for my menu. – davidjmcclelland Oct 01 '13 at 14:41
  • In addition to what @radonys said - to make it legal, instead of your div use span My div contents. Leave like that, or better move the style into the class. – valk Oct 28 '13 at 14:23
  • His is not standard, it may not work properly in some web browsers. – e-info128 Feb 18 '14 at 14:42
  • very clever WHK, but he asked how to wrap a link in a div. thanks for the downvote – Barry Chapman Feb 18 '14 at 16:08
  • @BarryChapman not specifically he didn't... he asked 'How do I make that div into a link?' There are other methods that would still validate. Anyway I gave you an upvote, people get waaayyy too caught up on HTML validation. – Jesse Head Oct 26 '14 at 17:03
  • 40
    Not the case anymore with HTML 5 `The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link` http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element – feitla Oct 29 '14 at 20:26
9

Using

<a href="foo.html"><div class="xyz"></div></a>

works in browsers, even though it violates current HTML specifications. It is permitted according to HTML5 drafts.

When you say that it does not work, you should explain exactly what you did (including jsfiddle code is a good idea), what you expected, and how the behavior different from your expectations.

It is unclear what you mean by “all the content in that div is in the css”, but I suppose it means that the content is really empty in HTML markup and you have CSS like

.xyz:before { content: "Hello world"; }

The entire block is then clickable, with the content text looking like link text there. Isn’t this what you expected?

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
6

Wrapping a <a> around won't work (unless you set the <div> to display:inline-block; or display:block; to the <a>) because the div is s a block-level element and the <a> is not.

<a href="http://www.example.com" style="display:block;">
   <div>
       content
   </div>
</a>

<a href="http://www.example.com">
   <div style="display:inline-block;">
       content
   </div>
</a>

<a href="http://www.example.com">
   <span>
       content
   </span >
</a>

<a href="http://www.example.com">
   content
</a>

But maybe you should skip the <div> and choose a <span> instead, or just the plain <a>. And if you really want to make the div clickable, you could attach a javascript redirect with a onclick handler, somethign like:

document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');

but I would recommend against that.

ramsesoriginal
  • 1,860
  • 1
  • 13
  • 16
  • The div element had to be inline-block in my case and works perfectly. All

    elements inside the div will get the basic link behavior when hovering over the hole div.

     – The Demz Aug 14 '14 at 22:43
  • 1
    The JS worked quite well for me. I also added style="cursor: pointer;" to the container div to make it look like a link for the user when they hover over it. – Aurelin May 25 '17 at 18:57
5

the html:

 <a class="xyz">your content</a>

the css:

.xyz{
  display: block;
}

This will make the anchor be a block level element like a div.

laymanje
  • 833
  • 5
  • 9