image grid gone wrong

[Silence~ 0]

I'm having trouble with getting the image in the right order. I'm trying to filter images gotten from the database based on the button link. I got the reference from http://www.evoluted.net/thinktank/web-development/jquery-filtering. I have about 20+- buttons and for each button, I am getting all the picture that is being under that filter button through database. (Not sure where to post this, but I think it's more suited to be under css). Basically, I have gotten the css all wrong (my css is basic too ><), so I hope you could help me(where i have gone wrong) and give some pointers.

Here is css:

/*- FILTER OPTIONS -*/ul#filterOptions {	width: auto;	height: auto;	margin-top: 60px ;	;	overflow: hidden;	list-style: none;}ul#filterOptions li {	height: 52px;	margin-right: 2px;	float: left;}ul#filterOptions li a {	height: 50px;	padding: 0 20px;	border: 1px solid #999;	background: #cfcfcf;	color: #fff;	font-weight: bold;	line-height: 50px;	text-decoration: none;	display: block;	list-style: none;}ul#filterOptions li a:hover {	background: #c9c9c9;	list-style: none;}ul#filterOptions li.active a {	background: #999;	list-style: none;}/*- -*//*- OUR DATA HOLDER -*/#filterBody {	width: 100%;	height: 100%;	overflow: hidden;	list-style: none;}#filterBody div.item {	width: 200px;	height: 200px;	float: left;	text-align: center;}#filterBody div.item h3 {	margin-top: 10px;	font-size: 16px;	line-height: 20px;}/*- -*/

My html/php code looks like this (example of 1 button):

<!----------------- The filter buttons will be these-------------------------->    <ul id="filterOptions">      <li class="active"><a href="#" class="all">All</a></li>      <li><a href="#" class="IS_1">C#</a></li>      <li><a href="#" class="IS_2">PHP/MySQL</a></li>      <li><a href="#" class="IS_3">HTML/CSS</a></li>      <li><a href="#" class="IS_4">Java Enterprise Development</a></li>      <li><a href="#" class="IS_5">Mobile Application Development</a></li>      <li><a href="#" class="IM_1">Web Design</a></li>      <li><a href="#" class="IM_2">3D Modelling & Animations</a></li>      <li><a href="#" class="IM_3">Graphic Design</a></li>      <li><a href="#" class="IM_4">Video Editing</a></li>      <li><a href="#" class="IM_5">Motion Graphics & Effects</a></li>      <li><a href="#" class="CNET_1">Network Security</a></li>      <li><a href="#" class="CNET_2">RB Network Design & Implementation</a></li>      <li><a href="#" class="CNET_3">Broadband Access & WAN</a></li>      <li><a href="#" class="CNET_4">ICT Infrastructure Management</a></li>      <li><a href="#" class="CNET_5">Technopreneurship Project</a></li>      <li><a href="#" class="ITSM_1">Virtualisation & Cloud Computing</a></li>      <li><a href="#" class="ITSM_2">IT Service Operation & Management</a></li>      <li><a href="#" class="ITSM_3">Server Administration & Security</a></li>      <li><a href="#" class="ITSM_4">Database Administration & Management</a></li>      <li><a href="#" class="ITSM_5">Internet of Things App Development</a></li>      <!--<li><a href="#" class=""><?php  ?></a></li>-->    </ul><!--------------Filtered contents to be through the button--------------------><div id="filterBody">    <!----Filter contecnt of C#------>      <div class="item IS_1">      <p> Hello everybody!</p><?php  try{  //connect to the database  require("Connections/database.php");  		// array to hold errors        $errors = array(); 		 if(empty($errors)){          //select portfolio picture from database        $query = "SELECT p.*, u.skillset FROM portfolio p INNER JOIN userProfile u ON p.user_id = u.user_id WHERE u.skillset LIKE '%C#%' ";		//var_dump($query);        $stmt = $database->query($query);		  foreach ($stmt as $row) {			  //print out the data				  ?>               <div id= "imagesPortfolio">              <img src="<?php print htmlspecialchars($row['imagePath']); ?>" width="100" height="100">	               </div>             <?php			  //print $row['imageName'] . "t";			  //print $row['Name'] . "t";			//foreach($row['picPath'] as $picURL) {			//$picURL = $row['picPath'];			//'<img src="'. $dir. '/'. $file. '" alt="'. $file. $			//}			 // print '<img src="'. $picPath. '/'. $file. '" alt="'. $file;			  //print $row['introduction'] . "n";		  }		 }  foreach($errors as $error)    {        printf("<li>%s</li>", $error);		//exit();    }  } //end of try block     catch(PDOException $e){ // end of database dependent code, handle any errors    $status = empty($query) ? 'Connection failed':" Query failed: $query";    // application message    trigger_error("$status, Error: {$e->getMessage()}, File: {$e->getFile()}, Line: {$e->getLine()}");    // user message    $errors[] = 'Sorry, this page is not working at this time.';}?>        <!---The like system implementation----><!--        <div class="like-btn">Like</div>        <div class="dislike-btn"></div>-->      </div><!------Other buttons same as this buttons, only filter name different--------></div>

Is my concept wrong? >< I think i have misinterpreted somewhere, I just can't point out whether it's the css, the php or both ;-; I need to put 6 images in a row, and I'm not sure how to do this in the foreach loop too ><