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.
Click on the CSS Styles Panel to open it:
Click the plus button at the bottom to create a 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.
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.
Click OK. Your CSS Style panel should now look like this:
Notice now that all the images are left aligned to the left but they are all jumbled up.
All the objects are wrapped to the left. To remedy this you will use the clear property.
Click the plus button
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".
Select the Box category.
For the Clear setting, select Both.
Click OK.
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.
.
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
