How do I make entire div a link? [duplicate]

Question

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

Answer 1

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> 

Answer 2

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?