Tutorial 4 - Floating an image thumbnail gallery

Step 4 - Add margin

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

Netscape 4 badly misinterprets margins. To hide margins from this browser, but allow them to be applied by standards compliant browsers, place the margin rules in a separate style sheet and use "@import" to link the style sheet to your html page.

We are using a shorthand rule here: "margin: 0 15px 15px 0;". Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left.

Go to Step 5 →


Caption

Caption

Caption

Caption

Caption

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

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