not getting suitable output in fetching image and its description - php

Question

I want to display images and their description(on hover) dynamically in a localhost application.
I am getting a vertical output:
but I want the images to be show horizontally (to a certain extent), like this:
I tried the following
PHP
<?php
$c = mysql_connect("localhost", "abc", "xyz");
mysql_select_db("root");
$q = "select * from product";
$qc = mysql_query($q);
$count = 0;
while ($ans = mysql_fetch_array($qc)) {
if ($count == 0 || $count == 1 || $count == 2) {
$title = $ans[1] . " " . $ans[2];
print '<div class="img-wrap">';
print "<img id='display_img' src='products/$ans[8]'width=300 height=200 title='$title'>";
print '<div class="img-overlay">';
print '<h4>' . $title . '</h4>';
print '<p>' . $ans[9] . '</p>';
print '</div>';
print '</div>';
}
$count++;
if ($count == 3) {
print "<br />";
$count = 0;
}
}
?>
CSS
.img-wrap {
height:200px;
position:relative;
width:300px;
margin:10px;
}
.img-overlay {
background-color:#000;
bottom:0;
color:#fff;
height:200px;
width:300px;
opacity:0;
position:absolute;
z-index:1000;
transition-duration:0.5s;
cursor:pointer;
}
.img-overlay h4, .img-overlay p {
padding:0 10px;
}
.img-wrap:hover .img-overlay {
opacity:0.75;
transition:opacity 0.5s;
}
b {
background-color:#aa490e;
color:#fff;
font-size:36px;
padding: 0 15px;
padding-left:65px;
padding-bottom:25px;
font-family:"Courier New", Courier, monospace;
}

Answer 1

Try changing .img-wrap as following:
.img-wrap
{
float:left;
clear:none;
height:200px;
position:relative;
width:300px;
margin:10px;
}

Answer 2

You can add display: inline-block to .img_wrap:
.img-wrap {
...
display: inline-block;
}
Or you can use float: left. But in this case make sure you clear: both after the last item.
http://jsfiddle.net/tRRVv/