Creating a Category Page with Thumbnails and Captions Underneath..... or

Question

I have a page that I am trying to create that looks like the image attached. [![enter image description here][1]][1] I got so far as putting in the thumbnails because no matter what I do, the thumbnails will line up like I write the code to do, however once I get the text links under them, it goes out of whack.

I tried using the '

This is what I got so far:

`<div id="ProductsBodyThmbs">
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 1</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 2</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 3</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 4</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 5</figcaption></div>`

Then the CSS I have for that div and tags goes like this:

#ProductsBodyThmbs {
float: left;
width: 640px;
}

figure {
width: 80px;    
float: left;
}

Any help or advise on this would be a great help...

Answer 1

OK, I figured out what I was doing. Basically, I was closing <figure> BEFORE adding the <figcaption> tag. so basically here is the soultion below. I included the <figcaption> INSIDE the <figure> tag and now it all works as expected.

<div class="ProductThmbsLeft">
<figure>
<img src="images/productThmb.jpg" alt="Product Thumbnails">              
<figcaption><a href="#">text text</a></figcaption></figure>
<figure>
<img src="images/productThmb.jpg" alt="Product Thumbnails">
<figcaption><a href="#">text text</a></figcaption></figure>
<figure>
<img src="images/productThmb.jpg" alt="Product Thumbnails">
<figcaption><a href="#">text text</a></figcaption></figure>
<figure>
<img src="images/productThmb.jpg" alt="Product humbnails">
<figcaption><a href="#">text text</a></figcaption></figure>
</div>