Wrapping text around an image, SWF, or FLV

The original way to wrap text around images was to select the image in the Document window, and select Left or Right from the Align pop-up menu in the Property inspector. That option is still available, but it leaves the text jammed right up against the side of the image. To create a bit of breathing space, you need to enter a number in the H Space field. The problem with this is that the same amount of horizontal space is added on both sides of the image, as you can see in this example.

Using CSS is much more efficient. Creating the two style rules is a one-time operation for the site, and you can add horizontal space on just one side, resulting in a much neater solution. Moreover, if put the style rules in an external style sheet, you can apply them quickly to any image or movie in your website. And if you change your mind about the amount of horizontal or vertical space you want around your images, you can apply the same changes automatically to all images simply by changing the style rule.

Creating the basic style rules

Although you can use the Dreamweaver New CSS Rule and CSS Rule definition dialog boxes to create the style rules, it's probably much quicker to open your style sheet and type them in manually. Dreamweaver code hints will take care of a lot of the typing anyway. If you haven't created a style sheet for your site yet, read Using Page Properties to create a basic style sheet.

Add the following code to the bottom of your style sheet:

.floatleft {
  float: left;
  margin-right: 10px;
}
.floatright {
  float: right;
  margin-left: 10px;
}

The dot (period) in front of .floatleft and .floatright tells the browser that these style rules are CSS classes. Both use the float property to move the image to the left or right of the page. As the names suggest, margin-right and margin-left add horizontal space on the relevant side. This example uses 10 pixels, but you can adjust this amount to suit your own preferences. However, make sure there is no space between the number and px.

NOTE: If you are using one of the predefined CSS starter pages in Dreamweaver CS3 or later, similar classes have already been created for you in the style sheet. However, the names have been shortened by omitting the vowels ( .fltlft and . fltrt).

Applying the classes

All that's needed to use these style rules is to select the image, Flash movie, or FLV file in the Document window, and select floatleft or floatright from the Class pop-up menu. This inserts the appropriate class name in the opening HTML tag like this:

<img src="../images/cape_royal.jpg" alt="Grand Canyon"
width="250" height="366" class="floatleft" />

Note that when the class attribute is added to the HTML tag, the leading dot (period) is omitted.

If you want to move the image or movie to the other side, just select it in Design view, and choose the other class name from the Class pop-up menu.

Adding vertical space above and below the image

To add vertical space, use margin-top and margin-bottom. For example, the following code adds 3 pixels of vertical space at the top of an image that's aligned (floated) left, and 20 pixels at the bottom:

.floatleft {
  float: left;
  margin-right: 10px;
  margin-top: 3px;
  margin-bottom: 20px;
}

Note that there is a colon ( :) between each CSS property and its value. Each property/value pair is followed by a semicolon ( ;). Forgetting colons and semicolons, or getting them mixed up, is a common cause of problems with CSS.

What if I don't want text to wrap alongside?

If the following text contains a heading, you might want to move the heading below the image or movie. This is easily done by creating other CSS classes like this:

.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearboth {
  clear: both;
}

As the names suggest, the first two classes move any element to which they are applied below anything that has been floated left or right. The last one moves an element below an previous element that has been floated in either direction.

You apply these classes in exactly the same way: select the element in Design view, and choose the appropriate class from the Class pop-up menu in the Property inspector. This adds the class name to the opening HTML tag of the selected element like this:

<h2 class="clearleft">I'm on a new line!</h2>

If the element you want to move down already has a class applied to it, you need to add the second class in Code view like this:

<h2 class="article clearleft">I'm on a new line!</h2>

Remember to leave out the leading dot (period) from the class name, and leave a space between each one.

The following text is too tight up against the image

Often, when you use one of the classes designed to move an element down onto a new line, the text appears jammed too tight against the bottom of the image. Don't try to increase the margin on top of the text. It usually won't work. The solution is to make sure your .floatleft and .floatright style rules add a small amount of margin-bottom, as shown in one of the earlier examples. The earlier example used 20 pixels, which is probably too much for most cases. Experiment to find the optimum amount.

Using the CSS float property for other things

This recipe has concentrated on using the CSS float property for images, but it has many other uses. As long as it has a declared widhth, you can apply the float property to any HTML element, moving it to one side and wrapping all following content around it.