Add href to the entire div with HTML

I wanted to have the entire div link to microsoft.com. How do I add a link to the entire div wrapper-promo? I wanted it to where ever the user clicks, they would go to the link.

Here’s my jsfiddle: http://jsfiddle.net/huskydawgs/eL7rwLx3/45/

Here’s my HTML:

<html>
<head>
</head>

<body>
  <div class="wrapper-promo">
    <div>
      <h2>Three states or less</h2>
    </div>

    <div class="promo-content">
      <p>Bid and RFP Notification Only</p>

      <p>Online and email support</p>

      <p><a href="http://www.microsoft.com"><img height="31" src=
      "http://www.onvia.com/sites/default/files/button_get_started_orange.png"
      width="112"></a></p>
    </div>
  </div>
</body>
</html>

Here’s my CSS:

.wrapper-promo {
  background-color: #e2e3e4;
  margin: 10px 0;
  width: 100%;
}

.title-top {
  background-color: #2251a4;
  height: 40px;
  line-height: 40px;
}

.title-top-cell {
  display: table-cell;
  vertical-align: middle;
}

.promo-content {
  margin: 20px;
  padding: 0 0 10px 0;
}

h2 {
  font-family:Arial,sans-serif;
  font-size:19px;
  font-weight: bold;
  color:#fff;
  margin: 10px 0 -10px 0;
  text-transform:none;
}

h2.block-title {
  font-size:22px;
  margin: 0;
  text-align: center;
  text-transform:none;
}

.promo-content p {
  font-family: Arial,sans-serif;
  font-size: 14px;
  color: #232323;
  line-height: 20px;
  text-align: center;
 }

solution

I would suggest adding an empty anchor element as a direct child of the .wrapper-promo element. Then you can absolutely position it relative to the parent element so that it will take whatever dimensions the parent element is.

In doing so, the entire element is clickable, and you don’t have to worry about wrapping the a element around any div or block-level elements:

Updated Example

.wrapper-promo {
  position: relative;
}
.wrapper-promo > a {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}
<div class="wrapper-promo">
  <div class="title: "Add href to the entire div with HTML">
    <!-- ... -->
  </div>
  <div class="promo-content">
    <!-- ... -->
  </div>
  <a href="http://www.microsoft.com"></a>
</div>