Transform list in grid - php

Question

I have this list of images:
http://thegelu.com/camera/ffffff.php
And I'd like the pictures to display as a grid, not like a list. (aka each pictures next to each other)
Here's the PHP code:
<?php
$uploadsDirectory = 'slides/tail/';
if ($handle = opendir($uploadsDirectory)) {
echo '<hr/>';
echo 'Official Backgrounds';
echo '<hr/>';
echo "<div class='bgitem' style='color:white;font-weight:bold'>None</div>";
$uplo = array();
while (false !== ($file = readdir($handle))) {
array_push($uplo, $file);
}
sort($uplo);
$user = array();
foreach($uplo as $fname) {
if($fname != ".." && $fname != "."){
if(substr($fname,0,1) != "_")
echo "<div class='bgitem'><img src='slides/tail/$fname' height='30px'/></div>";
else
array_push($user, "$fname");
}
}
echo '<hr/>';
echo 'User Uploads :';
echo '<hr/>';
foreach($user as $div){
echo $div;
closedir($handle);
}
?>
I'm a beginner in PHP so I don't exactly know what to do.
Thanks in advance!

Answer 1

You can easily achieve a grid view using CSS. If you add the individual .bgitem items to a container, you can use the following CSS to achieve a grid view:
.grid {
width: 100%;
float: left;
clear: both;
}
.grid .bgitem {
float: left;
width: 30px;
height: 30px;
margin: 10px;
}
In turn, your markup should look something like:
<div class="grid">
<div class="bgitem"><img src="slides/tail/1.png" height="30px"></div>
...
</div>
jsFiddle Demo