Tutorial 4 - Floating an image thumbnail gallery - all steps combined

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".

Step 2 - Float the divs

Apply "float: left" to the .thumbnail rule. This will force each of the divs over to the left edge of the containing box or until it hits the edge of another div. A width is also required when floating an element - unless it is an image.

.thumbnail
{
float: left;
width: 60px;
}

Step 3 - Add a border

To make it easier to see what is going on, add a border to the divs using "border: 1px solid #666;". Netscape 4 does not like this rule, so it should be hidden from the browser using "@import".

border: 1px solid #999;

Step 4 - Add margin

Margins can be added to push the divs away from each other.

If Netscape 4 is a target browser, then longhand rules should be used (such as "margin-left: 20px;" and "margin-bottom: 20px;"), as this browser badly misinterprets shorthand rules associated with margins.

If standards compliant browsers are the target and the margin rule is hidden from Netscape 4 (using "@import"), then a single shorthand rule can be used - "margin: 0 15px 15px 0;".

Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left.

margin: 0 15px 15px 0;

Step 5 - Forcing a new line

If you are using a liquid layout (where the content area will be decided by the width of the user's browser window size) you may wish to let the thumbnails flow onto new lines as needed. However, if you are using a set width containing box, you may wish to force a line break and set a certain number of thumbnails on each line.

There are several ways to achieve this. For this exercise, we will use a BR styled with "clear: both".

.clearboth { clear: both; }
<br class="clearboth">

Step 6 - Add padding

At this point you may wish to remove the border around the divs. If you want to keep the border, some padding will have to be added, to move it away from the images.

padding: 5px;

Finished!

« Back to main menu


Caption

Caption

Caption


Caption

Caption

Caption

CSS CODE
.thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

.clearboth { clear: both; }

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>
<br class="clearboth">
<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