A Href Link for Entire Div in HTML/Css

How To Add An a href Link To A div ?

Can't you surround it with an a tag?

  <a href="#"><div id="buttonOne">
        <div id="linkedinB">
            <img src="img/linkedinB.png" width="40" height="40">
        </div>
  </div></a>

a href link for entire div in HTML/CSS

UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.

You'll need to choose between the following scenarios:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

which is semantically incorrect, but it will work.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

which is semantically correct but it involves using JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

which is semantically correct and works as expected but is not a div any more.

Entire div as a link?

No, div elements cannot have the href attribute, nor will they act like links. You can use the following in HTML5:

<a href="#"><div></div></a>

However, not all current generation browsers (notably Firefox 3.6) supports this. The other alternative is to add a absolutely positioned a element that has 100% width and height to the div:

div a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

This is valid HTML4, but it won't work on older versions of IE, of course. Otherwise should accomplish what you want. See: http://www.jsfiddle.net/uRh7j/

Make entire div a hyperlink

<a href='http://www.google.com'>
<div class="pad">
    <div style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
        <div>
            <span>View all</span>
        </div>
    </div>
</div>
</a>

wrap a tag around the whole thing!

HTML - how to make an entire DIV a hyperlink?

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';"> </div>

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>

Make entire div area clickable hyperlink

Wrap all your code inside <a> tag instead of <div>.

.block {    text-decoration: none;    width: 200px;    height: 272px;    background:red;    border: 0;    display: block;}.block h3 {  color: black;}.block ul li {  text-decoration: underline;}

<a href="#" title="Read more about Manchester United" class="block">   <h3>Book a season ticket with Manchester United</h3>  <ul>     <li>Read more about Manchester United <span class="bold">></span></li>   </ul></a>