CSS link to cover div block [duplicate] - html

Question

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Link into full div - html and css
I'm trying to construct CSS where the <a> tag covers an entire <div> block, so that anywhere on the <div> can be clicked.
Here's how the final div should look (image is 64×64px):
Here's the HTML:
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
Any CSS guru's help?

Answer 1

May be you can write like this:
<a href="#">
<img src="" alt=""/>
<h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
CSS
a{
display:block;
}
Note: as per html5 you can define block elements inside <a> tag

Answer 2

If you want have to anchor cover the whole block, your HTML should reflect that. While block-level anchors are a fresh idea from XHTML2/HTML5, they are working in nearly all modern browsers (even IE 7).
Just enclose all the DIV's contents with the anchor:
<div>
<a href="#nohref">
<img src="" alt="" />
<h3>On The Beach <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
</div>
div a {
display: block;
}
See also: http://html5doctor.com/block-level-links-in-html-5/
Shiny, but not new
What’s also very interesting about this technique is that actually this isn’t new: you can do it now. […] That’s one of the interesting things about HTML 5—it documents existing browser behaviour. As the browsers already handle wrapping links around block-level elements, and there is an obvious use-case, there was no reason to artificially keep the structure as invalid.

Answer 3

Wrap with anchor tag
<div>
<a href="#" class="cont-wrap-link">
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
<a>
</div>
CSS
div a.cont-wrap-link
{padding:0px; margin:0px;
display:block;
text-decoration:none;
}

Answer 4

Seeing as your doctype is HTML5 you can wrap the entire block in an anchor:
<a href="yourURL">
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
</a>
No need for any JS :)

Answer 5

Check out this Post
Remember: Ensure that the structure of the document still makes sense when CSS is not present.
Update
You can Achieve this using HTML5. Check this

Answer 6

While this probably could be done with somewhat hacky CSS I believe JS (jQuery) is easier in this case:
$('#the-div').click(function () {
$(this).find('a').eq(0).click();
});
Or something like:
var theDiv = document.getElementByID('the-div');
theDiv.onclick = function () {
window.location = theDiv.getElementsByTagName('a')[0].href;
};

Answer 7

I would suggest to add onclick="location.href='http://google.com';" style="cursor:pointer;" to your div tag.