title: Make whole parent div a clickable zone
body: <p>This question has probably been answered many times, but I need help because I cannot achieve what I intend to do.</p>
  
  <p>I have this view:</p>
  
  <pre><code>&lt;div class="bookView"&gt;
      @for (int i = 0; i &lt; Model.Count; i++)
      {
          &lt;div class="bookUnit" onclick="$@Url.Action("SeeBook", new { bookID = Model[i].BookID})"&gt;
              &lt;span class="linkSpan"&gt;&lt;/span&gt;
              &lt;div class="bookTitle" data-id="@Model[i].BookID"&gt;
                  @Html.DisplayFor(_item =&gt; _item[i].BookName) 
              &lt;/div&gt;    
              &lt;div class="bookDetail"&gt;
                  &lt;div class="bookCategory"&gt;
                      @Html.DisplayFor(_item =&gt;_item[i].Category.CategoryName)
                  &lt;/div&gt;
                  &lt;div class="bookEditor"&gt;
                      @Html.DisplayFor(_item =&gt; _item[i].Editor.EditorName)
                  &lt;/div&gt;
                  &lt;div class="bookDate"&gt;
                      @Model[i].DateAdded.ToShortDateString()
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="bookScore"&gt;
                  Score: @Html.DisplayFor(_item =&gt; _item[i].Score)
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
      }
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the related CSS:</p>
  
  <pre><code>.linkSpan {
      width:100%;
      height:100%;
      /*top:0;*/
      /*left: 0;*/
      display: block;
      /* edit: added z-index */
      z-index: 1;
      /* edit: fixes overlap error in IE7/8, 
          make sure you have an empty gif */
      /*background-image: url('empty.gif');*/
  }
  
  .bookView {
      padding: 5px;
      margin: 5px;
      vertical-align: middle;
  }
  
  .bookView div {
      padding: 5px;
  }
  
  .bookUnit {
      clear: both;
      position: relative;
      background-color: white;
      border: 1px solid lightblue;
      z-index: 0;
  }
  
  .bookUnit:hover {
      border: 1px solid red;
  }
  
  .bookTitle {
      float: left;
      font-weight: bold;
  }
  
  .bookDetail {
      float: left;
  }
  
  .bookScore {
      float: left;
  }
  </code></pre>
  
  <p>So the goal is that the whole <code>bookUnit</code> div with all its content would become a clickable zone which would carry the ID to my controller method. There's abount 20 <code>books</code> per loops, but each div would carry its own ID.</p>
  
  <p>I've tried the <code>anchor</code> method as you can see, but it did not work...</p>