show images in grid and place title underneath

[ggalan]

i have 6 images i would like to show in a grid, how would i do this and place the title underneath while keeping them all in 1 anchor tag so both have clicks?
currently, the text sticks out to the right and i cant get it to align under the image and have precise control over it
images are 230px wide

css:


div.items {width:900px; display:inline; }
div.items ul {display:inline;}
div.items ul li{display:inline; padding:0 50px 0 0; width:230px; height:500px; margin:0; position:relative; background-color:#ccc;}
div.items ul li a{position:relative; font-size:13px; white-space: nowrap; text-align:left; }
div.items ul li img{padding:0 0 15px 0; }

html


<div class="items">
<ul>
<li>
<a href="#/section1"><img src="images/thumbs/1.jpg" />section1</a>
</li>
<li>
<a href="#/section2"><img src="images/thumbs/2.gif" />section2</a>
</li>
<li>
<a href="#/section3"><img src="images/thumbs/3.jpg" />section3</a>
</li>
<li>
<a href="#/section4"><img src="images/thumbs/4.jpg" />section4</a>
</li>
<li>
<a href="#/section5"><img src="images/thumbs/5.jpg" />section5</a>
</li>
<li>
<a href="#/section6"><img src="images/thumbs/6.jpg" />section6</a>
</li>
<br/>
</ul>
</div>


answer: http://codingforums.com/showthread.php?t=172304