Web Design
CSS Exercise 3: Using float

Creating text wrap with float property

Focus on:

• Using float property to create text wrap around an image
• Using class selectors
• Understanding "normal flow of the document" and what happens when elements leave normal flow
• Understanding "collapsed containers"
• Using clearfix class to fix collapsed container
• Using overflow property to fix collapsed container
• use validators to check and correct work:
  • HTML validator
  • CSS validator

Overview

You have two layouts that need to use float to create a "text wrap" effect. The instructions for each will specify how to create the text wrap, and correct collapsed containers.

Important: There are already some styles embedded, so you can simply add your styles to the existing style sheet.

Workflow

text-wrap1.html instructions

This page needs you to create a feature-image class to float the images within the news story. Both images will have this class assigned to them. Both will float to the left. View the screenshot to see the offset you will need in that style to create an interval between the edge of the image and the text that wraps around it on the right.

The second image will cause the article to become a "collapsed container." Fix this using the "overflow" method. The style for the overflow will work in the article or the main. For this design, the main is probably the best place to put it.

text-wrap2.html instructions

This page needs you to create a feature-image class to float the images within each of the sections about different aspects of viburnums (flowers, fruit, foliage). View the screenshot to see the offset you will need, and other styling for the feature images.

The feature images will need some padding and a border to create the visual "frame" around them. They will also need some margin to offset the text.

Your sections will collapse, and will also be laid out wrapping around previous sections' floated images. Our PDF lecture notes discuss this. You will use the "clearfix" method, which stops a float, to fix this. You'll need to create a class called clearfix and apply it to the sections that are "wrapping".

You'll also need to fix the collapsed main with the "overflow" method.

To get the proper intervals between your sections, you will need to use padding on the top of the sections. 20px should do the trick.

Validation

You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.