Tutorial 4 - Floating an image thumbnail gallery

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.

Go to all steps combined →


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>
Comments form
Other Max Design articles and presentations
Associated with webstandardsgroup.org