After incorporating most of your suggestions, I successfully redesigned my own dynamic layout and I am extremely pleased with the outcome. Thank you for all your assistance! Here is the code snippet:
http://jsfiddle.net/KjgfV/
<!DOCTYPE html>
<html>
<head>
<title> Periodic Table of Elements, in CSS! </title>
<link rel="stylesheet" type="text/css" href="style.css"> <!--Main StyleSheet -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!-- jQUery -->
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<section>
<div id="menu"> The Periodic Table of Elements </div>
<div id="container">
<div id="panelOne">
<div class="box"><a href="http://en.wikipedia.org/wiki/Hydrogen"> H </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Lithium"> Li </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Sodium"> Na </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Potassium"> K </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Rubidium"> Rb </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Caesium"> Cs </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Francium"> Fr </a></div>
</div>
<div id="panelTwo">
<div class="box"><a href="http://en.wikipedia.org/wiki/Beryllium"> Be </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Magnesium"> Mg </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Calcium"> Ca</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Strontium"> Sr </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Barium"> Ba </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Radium"> Ra </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Scandium"> Sc</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Yttrium"> Y </a></div>
<div class="box"><a href="#"> * </a></div>
<div class="box"><a href="#"> * </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Titanium"> Ti </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Zirconium"> Zr </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Hafnium"> Hf </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Rutherfordium"> Rf </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Vanadium"> V </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Niobium"> Nb </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Tantalum"> Ta </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Dubnium"> Db </a></div>
</div>
(Additional panels continue...)
</div>
<div id="clear"></div>
<div id="lowerContainer">
(Bottom elements continue...)
</div>
<div id="infoContainer">
This is the information.
</div>
</section>
</body>
CSS:
(CSS continuation remains same as provided)
jQuery:
$(document).ready(function () {
var $ic = $('#infoContainer');
$ic.hide();
$('.box').click(function () {
var newLink = $(this).find('a').attr('href');
var left = ($(window).width()/2)-(600/2),
top = ($(window).height()/2)-(400/2),
popup = window.open (newLink, "Element", "width=600, height=400, top="+top+", left="+left);
return false;
}); //End box click
}); //End ready