Clickable div with nested divs inside

Question

I am looking to make a clickable div that has further divs nested inside. From what I understand, if you style an anchor tag display:block, it acts as a block (div) and you can nest the div you want clickable within it.

However, I don't believe you can continue nesting further divs beyond that... if this is the case, why is that?

And also, what would be the best/simplest solution to solve this. It would ideally be all CSS/HTML, but a jQuery solution be okay if CSS/HTML truly aren't possible.

Anyway... example:

This would work (yes?) as long as the anchor is styled display:block...

enter code here

<a>
     <div id='first'>
     </div>
</a>

This would not...

enter code here

<a>
     <div id='first'>
          <div id='inside first'>
          </div>
          <div id='inside first 2'>
          </div>
     </div>
</a>

Any and all help appreciated. Thanks!

You can nest things any level deep inside an anchor (assuming HTML5 of course). Your second example works. Why do you think it would not? — Ben Lee, Jun 28 '12 at 23:17
It does? I just read that it wouldn't. I didn't realize that... I guess I'm reading some more outdated answers then. Also, with HTML5 I assume I still need to assign 'display:block' to the anchor tag to make it work, yes? — jstacks, Jun 28 '12 at 23:21
No, you don't need to do "display: block;". If there is a block-level element inside the anchor, it will display as a block normally. See this fiddle: http://jsfiddle.net/uyrn4/3/ — Ben Lee, Jun 28 '12 at 23:22
So then answers like this: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct are simply outdated? I guess HTML5 improved upon some things since the answers here do state that they are HTML 4. Awesome. Thanks! — jstacks, Jun 28 '12 at 23:25

score 1 · Accepted Answer · answered Jun 28 '12 at 23:24

1

Sure your second variant will work - http://jsfiddle.net/W5jG8/ You can go even deeper. In fact there is no limit how deep you can go with nesting. (Or maybe there is but it's not relevant to real life cases)

But it's semantically incorrect to nest block level elements into originally inline ones before HTML5. One solution is to replace all <div>-s with <span>-s and also make them block.

Or you can use <div>-s with jQuery and attach a click listener to the wrapper - http://jsfiddle.net/W5jG8/

answered Jun 28 '12 at 23:24

Zoltan Toth

46,981
12
120
134

So you can do it with HTML5 but it's semantically incorrect. What are the repercussions of it being semantically incorrect? And wouldn't made into block just be the same as a div? How does this change things to be semantically better? I'm no expert here so any/all help understanding is greatly appreciated. Thanks! – jstacks Jun 28 '12 at 23:44
Being semantically incorrect will lead to a huge embarrassment when other developers will look into your code :) On the serious side - http://www.webdesignfromscratch.com/html-css/why-write-semantic-html/ – Zoltan Toth Jun 28 '12 at 23:46

score 1 · Answer 2 · answered Jun 28 '12 at 23:25

if you are using HTML5 Doctype it's valid to use anchor tags for wrapping div elements, supposing you are not using HTML5 Doctype you can also try this:

div#first {
  cursor: pointer;
}

$('#first').click(function() {
    window.location = 'http://www.example.com'
})

score 0 · Answer 3 · answered Jun 28 '12 at 23:19

0

The simplest way is to use jquery, to specify an Id for the div you want to make clikable like so :

$('#div_Id').click(function(){

blablabla...

});

Here's somme doc : http://api.jquery.com/click/

answered Jun 28 '12 at 23:19

epsilones

11,279
21
61
85

Oh, sorry I didin't understand really your question : in fact you're looking for how to make the div clickable... – epsilones Jun 28 '12 at 23:21

score 0 · Answer 4 · answered Jun 28 '12 at 23:58

Putting div tags inside an anchor tag is not valid html so you shouldn't be doing that. In your case, the easiest would be to use a little JavasScript and define a simple onclick event on your parent div such as:

 <div id='first' onclick="javascript:MyRedirectFunction()">
      <div id='inside first'>
      </div>
      <div id='inside first 2'>
      </div>
 </div>

Then if you want the user to understand that this div will be clickable, you can use CSS to give it an anchor-like behavior such as:

div#first{ cursor: pointer; }
div#first:hover{ background-color:#CCCCCC;}

Clickable div with nested divs inside

4 Answers4