Hello I am new to this site and fairly new to using templates to design website. I am trying to add approximately 20 pictures of people along with their name which is a hyperlink to their own individual website. The hyperlinks do not work inside of the div class container. Is there a way to make these hyperlinks work inside the div?

The following is sample code within the html file. I hope I won't piss anyone off by adding the full code but my problem can be found in the <!-- /#gallery --><div class="container"> section
HTML Code:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>People - HCC Lab People Page</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
  <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
  <script type="text/javascript" src="js/cufon-replace.js"></script>
	<script type="text/javascript" src="js/roundabout.js"></script>
  <script type="text/javascript" src="js/roundabout_shapes.js"></script>
  <script type="text/javascript" src="js/gallery_init.js"></script>
  <script type="text/javascript" src="js/loopedslider.min.js"></script>
  <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- Load the mousewheel JavaScript file -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<style type="text/css">
<!--
#resourceSlides div {
    display: none;
}
#main{
    width:500px;
    height: 20px;
    background: lightblue;
}
#hidden {
    width:300px;
    height:20px;
    background: lightgrey;
    display: none;
}
-->
</style>
 <script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script>

$(document).ready(function(){
	$("#carousel2").CloudCarousel(		
		{			
			yRadius: 40,
			 xRadius:405,
			xPos: 450,
			yPos: 18,
			FPS: 30,
			speed: 0.2,
			mouseWheel: true,
			bringToFront: true,
			autoRotate: 'no'
			
		}
	);
});

$(document).ready(function() {
    $('#resourceLinks a').click(function() {
        var i = $('#resourceLinks a').index($(this));
        $("#resourceSlides div").hide();
        $("#resourceSlides div:eq(" + i + ")").show();
    });
});
</script>

</head>
 

<body>
  <!-- header -->
  <header>
    <div class="container">
    	<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></h1>
      <nav>
        <ul>
        	<li><a href="index.html">Home</a></li>
           <li><a href="people.html"class="current">People</a></li>
          <li><a href="research.htm">Research</a></li>

           <li><a href="about.html">About</a></li>
		      </ul>
      </nav>
    </div>
	</header>
	 <!-- #gallery -->
  <section id="gallery">
  	<div class="container">
  	<h6>
  <img src="images/DrBLAH.png" alt="" align="left" ><br><br>  Dr. BLAH blazzah blazzah blah blah.</h6></p>
			 
    <!--	<ul id="myRoundabout" class = "cloudcarousel">
        	<!--<iframe class = "cloudcarousel" seamless="seamless" src="carousel.html" width="850" height="480"></iframe>
			<div id="carousel2" style="position: absolute; left: 10px; top: 60px; width: 850px; height: 480px; z-index: 13;">
			<div id="resourceLinks">
<a href="#"> <img class="cloudcarousel" src="images/electronicVotingIcon.png" alt="Prime III" title="Prime III" width="180" height="200" border="0" /> </a>
 <a href="#"> <img class="cloudcarousel" src="images/hccIconAQ.png" alt="" title="" width="180" height="200" border="0" /> </a>
 <a href="#"> <img class="cloudcarousel" src="images/hccIconCRC.png" alt="" title="" width="180" height="200" border="0" /> </a> 
 <a href="#"> <img class="cloudcarousel" src="images/voicingIcon.png" alt="" title="" width="180" height="200" border="0" /> </a> 
 <a href="#"> <img class="cloudcarousel" src="images/BCIIcon.png" alt="" title="" width="180" height="200" border="0" /> </a> -->
      </div>
	  </div>
	  </ul>
  	
  </section>
  <!-- /#gallery -->
<div class="container"> 
<div class="my_left_box">
     <img src="images/name.jpg" width="200" height="200" alt=""> <h4>
     <a href="http://www.TheirPersonalWebsite.com/">FirstName LastName, M.S.</a>
     <br> Ph.D. Student
   </div>
   </div>





    
  <div class="main-box">
    <div class="container">
      <div class="inside">
        <div class="wrapper">
        	<!-- aside -->
			<div id="resourceSlides">
   </div>
	</div>
		
      </div>
    </div>
  </div>
  <footer>
    <div class="container">
    	<div class="wrapper">
        <div class="fleft">Copyright -HCC </div>
        <div class="fright"><a href="http://www.humancentredcomputing.com/" target="_blank" rel="nofollow">HCC</a> &nbsp; &nbsp; &nbsp; &nbsp;  </div>
      </div>
    </div>
  </footer>
</body>
</html>


The following is part of the css style file that contains the div class "my_left_box" and "my_right_box"
Code:
 div.my_left_box{
    float: left;
    padding: 20px;
    width: 500px;
    border: 0px solid gray;
    
}

div.my_right_box{
    float: left;
    padding: 20px;
    width: 400px;
    border: 0px solid gray;
}



I will appreciate any help!