Add href to the entire div with HTML

Question

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:

<div class="wrapper-promo">
    <div class="title-top">
        <h2 class="block-title">
            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>

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;
 }

Answer 1

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-top"><!-- ... --></div>
  <div class="promo-content"><!-- ... --></div>
  <a href="http://www.microsoft.com"></a>
</div>

Answer 2

Instead of a div , just use an a with display:block; .

It will behave as a block element in your flow, and you can set an href etc.

You may need to override its color , text-decoration , and :visited CSS.

---

The alternative here is to use a click event with Javascript - blech.

---

Code request edit:

All you need to do is change the style of .wrapper-promo :

.wrapper-promo {
    background-color: #e2e3e4;
    display:block;
    margin: 10px 0;
    text-decoration: none;
    width: 100%;
}

then change it to an a :

<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>

Answer 3

With HTML5 it is allowed to wrap block elements within a tags even though the a tag is an inline element. Here is a fiddle where your original link is used as a container for all the other elements. http://jsfiddle.net/Nillervision/761tubkc/

<a class="blockLink" href="http://www.microsoft.com">
  <div class="wrapper-promo">
    <div class="title-top">
      <h2 class="block-title">
        Three states or less
      </h2>
    </div>
    <div class="promo-content">
      <p>Bid and RFP Notification Only</p>
      <p>Online and email support</p>
      <p>
        <img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
      </p>
    </div>
  </div>
</a>