Q&A: Linking a whole DIV

Q: I have a DIV with some text, an image and a link and I was asked by our designer to make the whole thing a link. I cannot use an image, so I tried nesting all in a link and making the real link text a SPAN with a style that makes it look like a link, which seemed dirty and I used a link around a DIV which is invalid HTML. How can you link a whole DIV?

A: This is a classic example where a small JavaScript makes a lot more sense than trying to misuse HTML or make non-semantic HTML mimic the proper element with CSS. If your construct is something like

you can write a JavaScript that assigns a click handler on every DIV that changes the document location to the href attribute of the first link:

window.onload = function(){
var divs = document.getElementsByTagName('div');
for(var i=0,j=divs.length;i

This is a rather obtrusive example when it comes to event handling, but it should get you on your way.

[tags]netmag,netmaguk,css,linking,javascript[/tags]