8/3/2019 Floatutorial Tutorial 4 - All Steps Combined

1/3

Previous Step

Main menu

Next step

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 onthe 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 floatingan 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 rulesassociated 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;".

atutorial: Tutorial 4 - all steps combined http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

3 10.12.2011 0:20

8/3/2019 Floatutorial Tutorial 4 - All Steps Combined

2/3

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 theuser's browser window size) you may wish to let the thumbnails flow onto new lines asneeded. 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; }

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;

Back to main menu

Caption

Caption

Caption

Caption

Caption

atutorial: Tutorial 4 - all steps combined http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

3 10.12.2011 0:20

8/3/2019 Floatutorial Tutorial 4 - All Steps Combined

3/3

Caption

CSS CODE

.thumbnail

{float: left;

width: 60px;

border: 1px solid #999;

margin: 0 15px 15px 0;

padding: 5px;

}

.clearboth { clear: both; }

HTML CODE

Caption

Caption

Caption

Caption

Caption

Caption

Other Max Design articles and presentations

Associated with webstandardsgroup.org

atutorial: Tutorial 4 - all steps combined http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

3 10 12 2011 0:20