Make a tag link clickable

HTML & CSS
1

make a(anchor) tag link clickable

<!doctype html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>3cols8</title> 
  </head> 
<style type="text/css">
.wrapper {
 margin:0px auto;
 text-align:left;
 border:0px; 
 overflow:hidden;
clear:left;
}
.center {
 float:left;
 width:100%;
 margin:0 -250px 0 -250px;

}
.content {
 margin:0 250px 0 250px;
 border:2px solid green;
padding:5px;
border-collapse:collapse;
word-wrap: break-word;
z-index:1;}
.left {
 width:250px;
 float:left;
 z-index:2
}
.right {
 width:250px;
 position:relative;
 float:right;
 z-index:2;
}
</style>
<body> 
<div class="wrapper">
  <div class="left">left column [COLOR="Red"]<a href="http://sitepoint.com" style="color:red">unclickable link</a>[/COLOR]</div> 
  <div class="center"> 
  <div class="content"> 
    <a href="http://sitepoint.com">clickable link</a><br>
     text<br>
     text<br>
     text<br>
  </div>
  </div>   
  <div class="right">right column  <a href="http://sitepoint.com">clickable link</a><br>
</div>  
</div>
 </body> 
</html> 

I have the code above at http://dot.kr/x-test/3cols8.php . 
The link which is in red inside left area is not unclickable in chrome.
How can I make it clickable?
2

As you may have already figured the stacking order means that your content ( or more specifcally, the MARGIN from your content is on top of your left column)…

I think you tried to fix this by using, z-index. What you forgot was that you need to give something a position:(something other than “static” which is default) before you can use z-index. in this case the best thing to use is position:relative;


.content {
 margin:0 250px 0 250px;
 border:2px solid green;
padding:5px;
border-collapse:collapse;
word-wrap: break-word;
[COLOR="Red"]position:relative;[/COLOR]
z-index:1;}
.left {
 width:250px;
 float:left;
[COLOR="Red"] position:relative;[/COLOR]
 z-index:2
}