Floating and Clearing Images

Open the Simpson web page you created in the previous activity. Locate the first character image (Homer Simpson). Notice that it appears at the baseline of the first line of text. Images are, by default, inline elements and flow next to other adjacent inline content. You will use the float property to wrap the text around the image.

Before creating your first CSS Style make sure your cursor is at the beginning of the document.

Locate the CSS Styles panel. Depending on which workspace you are using, it will appear with text or an icon. If it is not on your monitor screen, you can find it by choosing Window > CSS Styles.

CSS Panel

Click on the CSS Styles Panel to open it:

CSS Styles

Click the plus button at the bottom to create a new CSS rule.

New CSS Rule

Left Image CSS Rule:

For the Selector Type, select Class (Can Apply To Any HTML Element. The class selector begins with a period (stop), and can be used on as many objects on the page as you like. So if, for example, you had multiple images on the page that you wanted to wrap text around, you could apply this one class to all the images.

For the Selector Name, type .leftimage (don't forget the period at the beginning).

Choose to have your new rule defined for "This document only". Many designers develop their pages by first embedding the styles in the head of the document, and then later, after the layout is complete, export the styles to an external style sheet.

Click OK.

Left Image

When the CSS Rule Definition dialog box appears, select the Box category.

Select Left as the Float setting.

Deselect the Same For All check box under Margin.

Type 8 for both the Right and Bottom margins.

Leave the unit of measurement at pixels.

Float Settings

Click OK. Your CSS Style panel should now look like this:

CSS Style

Notice now that all the images are left aligned to the left but they are all jumbled up.

Wrapped Text

All the objects are wrapped to the left. To remedy this you will use the clear property.

Using the Clear Property:

Click the plus button Plus Sign at the bottom of the CSS Styles panel to create a new rule.

When the New CSS Rule dialog box appears, select Class as the Selector Type.

In the Name field, type .clearfloat (don't forget the starting period!)

Select the option to have the rule defined in "This document only".

Clear Float

Select the Box category.

For the Clear setting, select Both.

Click OK.

Clear Setting Both

By using both instead of left, the same class can be used for right or left floated images. Now you need to apply this new class.

Apply the New Class:

Click anywhere inside the h2 text "Marge Simpson" to select it.

In the Property inspector, select the clearfloat class as the Class.

Clear Float.

Continue wrapping the text to the left to the rest of the images on your page. Make sure that each image has just the text wrapped, not the h2 heading or the image below it. Also the footer (the copyright text) should appear below the image on a line of its own.

Here is how it should appear on your page.

Page Formatted with Text Wrapping and Clear Floating

CSS