Making a div clickable

Make a div clickable for a default link plus add some other links inside the same div.

HTML

<div class='main-panel'>
    <p>The whole div should point to google.com</p>
    <p>Note that this div is using an "a" tag without an inner span.</p>
    <a class='default-link' href='javascript:void(0)' onclick='window.location = "http://www.google.com"'>
    </a>
    <p>The following link should take you to cnn.com</p>
    <a class='independent-link' href='http://www.cnn.com'>CNN</a>
    <p>Nice trick! Thanks to <a class='independent-link' href='http://stackoverflow.com/a/3494108/416255'>thepeer</a> answer on SO.</p>
</div>

<div class='main-panel'>
    <p>The whole div should point to google.com</p>
    <p>Note that this div is using an "a" tag with an inner span.</p>
    <a href='http://www.gmail.com' onclick='window.location = "http://www.google.com"'>
        <span class='default-link'></span>
    </a>
    <p>The following link should take you to cnn.com</p>
    <a class='independent-link' href='http://www.cnn.com'>CNN</a>
    <p>Nice trick! Thanks to <a class='independent-link' href='http://stackoverflow.com/a/3494108/416255'>thepeer</a> answer on SO.</p>
</div>

<div style="clear: both"/>

<p>The "default-link" class can be applied to either the "a" tag or to a "span" inside the "a" tag.</p>

CSS

.main-panel{
    /* only required rule to make this work */
    position: relative;
    
    /* just my formatting rules */
    width: 150px;
    min-height: 150px;
    background-color: #bebebe;
    padding: 5px;
    float: left;
    margin-right: 5px;
}

.main-panel:hover{
    background-color: #cecece;
}

.default-link{
  /* all rules required to make the whole div clickable */ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
  /* this is a fix for IE7-9 */
  background-color:#ffffff;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter: alpha(opacity=0);  
  opacity:0;  
}

.independent-link{
    /* all rules required to make other links to work */ 
    position: relative;
    z-index: 100;
}

JavaScript

// The nice thing is that this solution does not require any javascript!!