web interactivity

Wrapping text around an image by using a float

1. First create and save a new HTML page and add an image to it. If you need help putting a picture on a web page, here is a link to a tutorial from the first week. Remember, I recommend that you save any page that isn't the index page (the home page) in a separate pages folder, and any images that are going to be added to a page in an images folder. Save and store the images and pages in the correct folders before you combine them in Dreamweaver.

(This technique will only wrap the text that comes after the picture in Code or Design view. It will not wrap any text that occurs before the image's position on the page.)

2. From the Format menu choose CSS Styles > New (or click on the new CSS rule button (the + icon) at the bottom of the CSS window.

3. In the “New CSS Rule” dialog that now appears, make these choices:
- for “Selector Type” choose “Class (can apply to any tag)”
- for “Selector Name”, enter “floatLeft” in the box
- for “Rule Definition” choose “(New Style Sheet File)”, or select an existing style sheet if you have already created one. Since the .floatLeft class is a very useful one, I recommend that you store it in an external style sheet so that more than one page can use it.

4. Click OK; if you are making a new style sheet you will then be asked to save the new style sheet file. Pick a name for your style sheet and save it in the same location as your index page (outside of the pages or images folder). If you already have a style sheet, you will go right to the next step.

5. Now a new dialog box opens. In the list of categories you see on the left, choose "Box". Now look for a label that says "Float". Choose "left" from the pulldown menu. Click OK when you are done. (You could also choose to float the picture on the right; if you do that, make sure to change your class name to "floatRight" in the CSS window.)

6. In Design view, select the image you are manipulating. This will make the Properties window show the properties of the image.

7. In the Properties window, in the pulldown menu called “Class,” “floatLeft” should now appear. Choose it.

8. Any text that followed the picture will now slide up on the right side of the picture. If there is enough text, it will also wrap under the picture. Save and preview your page in the browser.

9. If the text is too close to the right side of the image (it usually is with this technique) double-click on the "floatLeft" class in the CSS window to return to the original formatting dialog box. In the list of categories on the left, choose "Box" again, then look for "Margin". Unclick where it says "same for all"; try adding 10 pixels to the right margin and click the Apply button to see how it looks.