CSS mess - text underneath image - html

Question

No matter what I tried it doesn't work correctly.
Basically I have a list of images that fill up my entire div's width and height.
Now I just want to add some captions right underneath each images. everything I tried either made the images all verticle in one line, etc.
Any kind of help I can get on this is greatly appreciated!
<div id="index-gallery" style="float:left; padding:5px; margin:10px 0 0 0;">
<? $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db);
while ($img3 = mysql_fetch_assoc($ires3)) { ?>
<a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
<img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>"></a>
SUBTITLE HERE!!!
<? } ?>
</div>

Answer 1

Try this...
HTML/PHP
<div id="index-gallery">
<?php $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db);
while ($img3 = mysql_fetch_assoc($ires3)) : ?>
<div class="img-box">
<a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
<img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>">
</a>
<p>SUBTITLE HERE!!!</p>
</div>
<?php endwhile; ?>
<div class="clear-both"></div>
</div>
CSS
#index-gallery {
width:100%;
}
.img-box {
float:left;
padding:5px;
margin:10px 0 0 0;
}
.img-box a, .img-box img {
display:block;
}
.clear-both {
clear:both;
}
Fixed Number of Columns in Each Row (for more consistence formatting)
<?php $cols = 4; ?>
<div id="index-gallery">
<?php $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db); ?>
<?php while ($img3 = mysql_fetch_assoc($ires3)) : ?>
<?php for($i=1; $i <= $cols; $i++) : ?>
<div class="img-box">
<a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
<img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>">
</a>
<p>SUBTITLE HERE!!!</p>
</div>
<?php if($i == $cols) : ?>
<div class="clear-both"></div>
<?php $i=1; endif; ?>
<?php endfor; ?>
<?php endwhile; ?>
<div class="clear-both"></div>
</div>

Answer 2

Check this out.
JSFIDDLE EXAMPLE
HTML
<div id="index-gallery">
<div class="item">
<img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
<p>My Caption here</p>
</div>
<div class="item">
<img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
<p>My Caption here</p>
</div>
<div class="item">
<img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
<p>My Caption here</p>
</div>
<div class="item">
<img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
<p>My Caption here</p>
</div>
</div>
CSS
.item{
width:200px;
text-align:center;
display:block;
background-color: #ededed;
border: 1px solid black;
margin-right: 10px;
margin-bottom: 10px;
float:left;
}
#index-gallery{
width:465px;
}