http://css.maxdesign.com.au/floatutorial/tutorial0407.

htm
Tutorial 4 - Floating an image thumbnail gallery - all steps
combined
Step 1 - Start with some thumbnails and captions
For this exercise, we want to move all the thumbnails up into rows, like table cells. The
method we are going to use allows for any number of images to sit beside each other,
depending on the width of the containing box.
Start with 6 images and captions, each in their own div. The divs have all been given a class
called "thumbnail".

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.
.thumbnail
{
float: left;
width: 60px;
}

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

Step 4 - Add margin

Margins can be added to push the divs away from each other.
If Netscape 4 is a target browser, then longhand rules should be used (such as "margin-left:
20px;" and "margin-bottom: 20px;"), as this browser badly misinterprets shorthand rules
associated with margins.
If standards compliant browsers are the target and the margin rule is hidden from Netscape 4
(using "@import"), then a single shorthand rule can be used - "margin: 0 15px 15px 0;".
Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left.
margin: 0 15px 15px 0;

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".
.clearboth { clear: both; }
<br class="clearboth">

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.
padding: 5px;

Finished!
Back to main menu

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"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

Other Max Design articles and presentations

Associated with webstandardsgroup.org
\

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"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

<img src="images/image.gif" alt="" width="60" height="60"><br>

Caption
</div>

Other Max Design articles and presentations

Associated with webstandardsgroup.org

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"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

Other Max Design articles and presentations

Associated with webstandardsgroup.org

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"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

Other Max Design articles and presentations

Associated with webstandardsgroup.org

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"
Caption
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

Other Max Design articles and presentations

Associated with webstandardsgroup.org

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"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

Other Max Design articles and presentations

Associated with webstandardsgroup.org

all steps combined

Step 1 - Start with some thumbnails and captions
For this exercise, we want to move all the thumbnails up into rows, like table cells. The
method we are going to use allows for any number of images to sit beside each other,
depending on the width of the containing box.
Start with 6 images and captions, each in their own div. The divs have all been given a class
called "thumbnail".

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.
.thumbnail
{
float: left;
width: 60px;
}

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

Step 4 - Add margin

Margins can be added to push the divs away from each other.
If Netscape 4 is a target browser, then longhand rules should be used (such as "margin-left:
20px;" and "margin-bottom: 20px;"), as this browser badly misinterprets shorthand rules
associated with margins.
If standards compliant browsers are the target and the margin rule is hidden from Netscape 4
(using "@import"), then a single shorthand rule can be used - "margin: 0 15px 15px 0;".
Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left.
margin: 0 15px 15px 0;

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".
.clearboth { clear: both; }
<br class="clearboth">

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.
padding: 5px;

Finished!
Back to main menu

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"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif"
Caption
</div>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

alt="" width="60" height="60"><br>

Other Max Design articles and presentations

Associated with webstandardsgroup.org