How do I make entire div a link

Question

I have a div like this  lt div class  xyz  gt  lt  div gt  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

User · Answer

the html     lt a class  xyz  gt your content lt  a gt    the css    xyz    display  block      This will make the anchor be a block level element like a div

User · Answer

Wrapping a  lt a gt  around won t work  unless you set the  lt div gt  to display inline-block  or display block  to the  lt a gt   because the div is s a block-level element and the  lt a gt  is not    lt a href  http   www example com  style  display block   gt      lt div gt         content     lt  div gt   lt  a gt    lt a href  http   www example com  gt      lt div style  display inline-block   gt         content     lt  div gt   lt  a gt    lt a href  http   www example com  gt      lt span gt         content     lt  span  gt   lt  a gt    lt a href  http   www example com  gt     content  lt  a gt    But maybe you should skip the  lt div gt  and choose a  lt span gt  instead  or just the plain  lt a gt   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

User · Answer

Using   lt a href  foo html  gt  lt div class  xyz  gt  lt  div gt  lt  a gt    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

User · Answer

You need to assign display  block  property to the wrapping anchor  Otherwise it won t wrap correctly    lt a style  display block  href  http   justinbieber com  gt     lt div class  xyz  gt My div contents lt  div gt   lt  a gt

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

Examples related to html

Examples related to css