jQueryを使ったサイト（2）

CSS課題

最小３列、最大５列に並ぶ可変グリッド + Lightbox
出来ました。
http://felica.boy.jp/no3design/

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>no3 DESIGN</title>
<link rel="stylesheet" href="css/jquery.lightbox-0.5.css">
<link rel="stylesheet" href="css/style.css">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=UnifrakturCook'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.lightbox-0.5.min.js"></script>
<script src="js/script.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script>
$(function() {
$('#gallery a').lightBox();
});
</script>
</head>

<body>
<div id="outer">
<div id="wrapper">
	<div id="header">
		<h1>no3 <span>DESIGN</span></h1>
		<ul id="nav">
			<li>HOME</li>
			<li>ABOUT</li>
			<li>GALLERY</li>
			<li>CONTACT</li>
		</ul>
	</div>
	<div id="content">
		<div class="inner1">
			<div class="inner2">
				<div class="inner3">
				<h2>GALLERY</h2>
					<div id="main">
						<ul id="gallery">
							<li><a href="photos/image1.jpg"><img src="photos/image1.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image2.jpg"><img src="photos/image2.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image3.jpg"><img src="photos/image3.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image4.jpg"><img src="photos/image4.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image5.jpg"><img src="photos/image5.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image1.jpg"><img src="photos/image1.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image2.jpg"><img src="photos/image2.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image3.jpg"><img src="photos/image3.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image4.jpg"><img src="photos/image4.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image5.jpg"><img src="photos/image5.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image1.jpg"><img src="photos/image1.jpg" alt="" width="180" height="135"></a></li>
							<li><a href="photos/image2.jpg"><img src="photos/image2.jpg" alt="" width="180" height="135"></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		Copyright &copy; 2012 no3design.
	</div>
</div><!-- wrapper -->
</div><!-- outer -->
</body>
</html>

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #eee;
}
#wrapper {
	margin: 0 auto;
	min-width: 720px;
	max-width: 1100px;
	background-color: #eee;
}
#header {
	overflow: hidden;
	height: 100px;
}
#nav {
	padding-top: 20px;
}
h1 {
	font-family: 'UnifrakturCook', cursive;
	float: left;
	padding-top: 20px;
}
h1 span {
	color: #999;
}
h2 {
	font-family: 'UnifrakturCook', cursive;
	background-color: #1d2b3d;
	color: #fff;
	padding-left: 30px;
}
ul {
	list-style-type: none;
	float: right;
	overflow: hidden;
}
li {
	font-family: 'UnifrakturCook', cursive;
	float: left;
	padding: 10px;
}
#content {
	overflow: hidden;
	background-color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.3);
}
#main {
	padding: 50px 50px 70px 50px;
	overflow: hidden;
}

.footer {
	font-family: 'UnifrakturCook', 
	height: 10px;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 20px;
	color: #aaa;
}