Working with Floats

The float property allows you to move a floated element either to the right or to the left within its parent container. There are many occasions where the float property can be deployed within your work. Let’s learn first about floating images within a p element.

It is a common practice—at least for me—to set up two generic float classes. This is functionality I require on every site I build. One class floats elements to the left; the other floats them to the right. Review and follow the steps in the demo to create the two float classes.

Now apply one of the float classes to an image on your page:

1. Open the external2.html file, which you linked to your CSS file in Part 1.
2. Add a p element to your page and insert several lines of text within the opening and closing

   tags.

3. Switch to the Code view. You need to be able to place the image accurately that you are going to float.

4. Insert your cursor immediately after the closing angle bracket of the opening

   tag (see Figure 13). You are now in a position to insert your image. It will have one of the float classes applied to it, and it will be floated within the p element.

   

   

   Figure 13. Placing the cursor where you will insert the image

5. Insert floated_colorblock.gif included in the sample download file linked to at the beginning of the article, or insert an image of your choice.

6. Once you have done that, switch back to the Design view (see Figure 14).

   

   Figure 14. Image sitting inside a p element with the lorem ipsum text

The image is sitting in its default position within the p element. Review and follow the steps in the following demo to add margins to your float classes and apply the float classes to your image.

We have covered quite a bit of ground now. The good news is that with the skills you have learned in Parts 1 and 2, you are now ready to put together your first CSS-positioned layout, which I cover in Part 3. Before you continue, it would be a good idea to read my article, Introduction to CSS Positioning in Dreamweaver MX 2004.