Tutorial 4 - Floating an image thumbnail gallery

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

Go to Step 6 →


Caption

Caption

Caption


Caption

Caption

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

.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