And your CSS would look something like this…
div.feature {
position: relative;
}
div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
How it Works
First off you’re giving the containing div a position (this is very important!). You’re then assining the link inside of the div an absolute position which positions the link relative to the div that is containing it.
Next, setting the top and left attributes to zero we’re positioning the link in the top left corner of it’s containing div. We then apply a width and height of 100% which makes the link fill the entire containing div. Lastly—and also most importantly—we’re adding a z-index of 10 to the link to make sure that it’s the very top layer and isn’t obstructed or hidden by any other elements. (Technically you could use a value other than 10 as long as there weren’t any other elements in your container with a higher z-index number.)
Of course leave it to Internet Explorer to give us problems (what else is new?). Older versions of Internet Explorer as it just so happens require such a link to have a background color in order to be clickable (yeah, because that makes sense Microsoft!). That being the case we assigned the link a backfround color of #FFF (white) and we set the opacity to zero. After that we give it an Inernet Explorer only oppacity of 1% (using IE’s proprietary filter property).
Comments
Extracted from http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/
The Right Way
To do this the right way your HTML would look something like this…
And your CSS would look something like this…
div.feature {
position: relative;
}