Making DIV a Link - Javascript Vs CSS

Few days ago, I was looking for the best way to make a DIV into a link when I came across this website: Almost Effortless!. The author showed how to make a div a link with a little bit of Javascript (see article). It is actually pretty simple:

The Javascript Technic:
view plaincopy to clipboardprint?

   1. <div id="header" onclick="location.href='http://www.example.com';" style="cursor:pointer;"> </div> 

<div id="header" onclick="location.href='http://www.example.com';" style="cursor:pointer;"> </div>

By this method, the whole block is clickable with just a single line of code while, with CSS, you will need to set few parameters to get the same result. Pretty cool, no?

Here is the CSS technic:

Now, let’s see how it works with CSS.

First, put a link inside your div:
view plaincopy to clipboardprint?

   1. <div id="header"><a href="#"></a></div> 

<div id="header"><a href="#"></a></div>

…and now set the link’s display property to 100% to fill the DIV in your stylesheet:
view plaincopy to clipboardprint?

   1. #header { 
   2.   width:300px; 
   3.   height:100px; 
   4.   border: solid #EEE; 
   5. } 
   6.  
   7. #header a { 
   8.   display:block; 
   9.   width:100%; 
  10.   height:100%; 
  11.   text-decoration:none; 
  12. } 
  13.  
  14. #header a:hover { 
  15.   text-decoration:none; 
  16.   background-color: #EFEFEF; 
  17. } 

#header {
  width:300px;
  height:100px;
  border: solid #EEE;
}

#header a {
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
}

#header a:hover {
  text-decoration:none;
  background-color: #EFEFEF;
}

Conclusion:
As you can see, the Javascript technic is faster than the CSS one but keep in mind that some people might disable Javascript in their browser and won’t see the link.

source: web-kreation