Aligning divs/img/h3

Hi, i’m trying to sort out this page on my website:

http://www.foundation-flash.com/tutorials/tutorials2.php

What i want is the row of three images at the top, and then the row of titles underneath. So far, the html is:

<a href="intro/"><img src="../images/AS3.png" alt="AS3" width="170" height="170" /></a>
<a href="intro/"><img src="../images/Flash.png" alt="Flash" width="170" height="170" /></a>
<a href="intro/"><img src="../images/Photoshop.png" alt="Photoshop" width="170" height="170" /></a>
<div width="170"><a href="intro/"><h3>Flash</h3></a></div>
<div width="170"><a href="intro/"><h3>Photoshop</h3></a></div>
<div width="170"><a href="intro/"><h3>AS3</h3></a></div>

Don’t worry about the links, I haven’t sorted them yet. The CSS is like this:

div#tutorialscategory img{
float:top;
}

div#tutorialscategory h3{
float:left;
}

div#tutorialscategory a{
border-color:#CCCCCC;
border-width:medium;
}

div#tutorialscategory a:hover{
border-color:#000000;
border-width:medium;
}

You should understand what I’m trying to do. Can anyone help? Thanks.