My HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ian Gonsalez</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> 
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> 
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> 
 	<link rel="stylesheet" href="style.css" /> 
<script type="text/javascript"> 
		$(document).ready(function() {
			/*
			*   Examples - images
			*/
 
			$("a#example1").fancybox({
				'titleShow'		: false
			});
 
			$("a#example2").fancybox({
				'titleShow'		: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});
 
			$("a#example3").fancybox({
				'titleShow'		: false,
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'
			});
 
			$("a#example4").fancybox();
 
			$("a#example5").fancybox({
				'titlePosition'	: 'inside'
			});
 
			$("a#example6").fancybox({
				'titlePosition'	: 'over'
			});
 
			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
 
			/*
			*   Examples - various
			*/
 
			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
 
			$("#various2").fancybox();
 
			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});
 
			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script> 

</head>

<body>
	<div id="head" >
<a <a href="/"><img src="images/logo.png"</a>
	</div>
	<div id="content" >
<div align="center"><h2>My Latest Works</h2></div>
	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp
	
	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>HELLO  TESTING!
	</div>
<div id="footer" >
<div align="center"><h2>Footer, yo.</h2></div>

</ br>
I like doin, flip n ****. Copyright
</ br>

	</div>
</body>
</html>
My CSS
Code:
/* Hand coded by Chris Yee */ 
html, body{ 
	margin:0; 
	padding:0; 
	text-align:center; 
	background-color:#FFFFFF;
	background-repeat:repeat;
	background-position:center;

} 
 
#head{ 
	width:100%;
	margin-left:auto; 
	margin-right:auto; 
	background-color:#242424;
	text-align:left; 
	color:#FFFFFF;
} 

#content{ 

	width:850px;
	text-align:center;  
	margin-left:auto; 
	margin-right:auto; 
	background-color:#efefef; 
	color:#808080;
	font-family:arial;
	font-size:8pt;
} 
 
#subs{ 
	margin:5px;
	float: left;
	width:150px;
	padding:5px; 
	text-align:center;  
	background-color:#f6f6f6; 
	color:#808080;
	font-family:arial;
	font-size:8pt;
	border-style:solid;
	border-width:1px;
	border-color:white;
} 

#footer{ 
	width:790px;
	padding:5px; 
	text-align:center;  
	margin-left:auto; 
	margin-right:auto; 
	background-color:#ebebeb; 
	color:#000000;
	font-family:arial;
	font-size:8pt;
	font-weight:bold;
}
I'm trying to get those divs centered so its like a gallery.