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
if(divs[i].className === ‘clickbox’){

divs[i].onclick = function(){

window.location = this.getElementsByTagName(‘a’)[0].href;

}

	
}

}
	
}

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