Tutorial 4 - Floating an image thumbnail gallery

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.

Go to Step 3 →


Caption

Caption

Caption

Caption

Caption

Caption
CSS CODE
.thumbnail
{
float: left;
width: 60px;
}

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