How can I change my div box to a link?

Question

I have a box with a header and some text content, How do I make it so when I hover over it, at acts like a link the whole box? I tried using the anchor tag but it only makes the text into a link, I want to be able to click anywhere inside the box and go to another webpage.

Here is a jsfiddle of my situation

html:

<div class="box" style="margin-top:100px;">
    <center><h2>Work</h2></center>
    <center><p>TESTTSETTE TESTTSETSTEBSTEBSTE TESTTSETSETSGTSTE TESTTSETSETSGTTE TESTTSETSETSGTE</p></center>
</div>

CSS:

.box {
    border: 2px solid #0094ff;
    width: 204px;
}
.box h2 {
    background: #0094ff;
    color: white;
    padding: 10px;
}
.box p {
    color: #333;
    padding: 10px;
}
.box {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    display: inline-block;
    margin-right: 20px;
}

Answer 1

i'm guessing you might be wanting to use javascript for that

using jquery

$('.box').on('click',function(){
 $('body').load('<url goes here>');
});

it's not the most elegant thing tho try playing with it like this http://jsfiddle.net/aj28y/7/ making sure the whole link fits the whole box :)

Answer 2

Put the div into the href tag:

<a href="http://domain.com">
<div class="box" style="margin-top:100px;">
    <center><h2>Work</h2></center>
    <center><p>TESTTSETTE TESTTSETSTEBSTEBSTE TESTTSETSETSGTSTE TESTTSETSETSGTTE TESTTSETSETSGTE</p></center>
</div>
</a>

also add a height to the box css.

Answer 3

try using jQuery, like:

$(document).ready(function) {
    $(".box").click(function() {
        window.location.href = "your_page_url";
    });
});

and you can add some css:

.box:hover {
    cursor: pointer;
}