Tutorial 4 - Floating an image thumbnail gallery

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 #999;". Netscape 4 does not like this rule, so it should be hidden from the browser using "@import".

Go to Step 4 →


Caption

Caption

Caption

Caption

Caption

Caption
CSS CODE
.thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
}

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