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!

Answer 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/