Tutorial 4 - Floating an image thumbnail gallery

Step 1 - Start with some thumbnails and captions

For this exercise, we want to move all the thumbnails up into rows, like table cells. The method we are going to use allows for any number of images to sit beside each other, depending on the width of the containing box.

Start with 6 images and captions, each in their own div. The divs have all been given a class called "thumbnail". It is better to name classes based on their meaning, rather than their appearance.

You could take this a step further and use CSS to define the width of the images as well, using the following rule ".thumbnail img { width: 60px; height: 60px; }"

Go to Step 2 →


Caption

Caption

Caption

Caption

Caption

Caption
CSS CODE
None

HTML CODE
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
Other Max Design articles and presentations
Associated with webstandardsgroup.org