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.

You made a class earlier called .leftimage and gave it right and bottom margin values. Select this class in your CSS panel to display the properties you’ve already assigned. Then complete the following steps.

1. Click the Add Property link
2. Select Float from the list
3. From the value list to the right select the left option
4. Save your CSS file

Create a second class called .rightimage and give properties and values of:

1. margin-left: 15px;
2. margin-bottom: 5px;
3. float: right;
4. Save your work

Check your CSS file, your new rule should look like the code below.

.rightimage {
 margin-left: 15px;
 margin-bottom: 5px;
 float: right; 
} 

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 earlier.
2. Remove the BlueBox div code.
3. Add a p element to your page and insert several lines of text within the opening and closing <p> tags.
4. Switch to the Code view. You need to be able to place the image accurately that you are going to float.

5. Insert your cursor immediately after the closing angle bracket of the opening <p> tag (see Figure 8). 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 8. Placing the cursor where you will insert the image

6. Set an image place holder by completing the following steps:

1. Select the common tab on the insert bar.
2. From the images option, select image place holder.
3. Complete the dialog box.
4. I set the width and height to 50px.

5. Click OK.

   

   Figure 9. Using an image placeholder

7. Click the image to select it then from the quick tag selector select the image by right clicking and selecting class from the context menu.

   

   Figure 10.Setting the leftimage class

   Once the class has been set, the image will float into position as shown in Figure 11.

   

   Figure 11.The image floating into position

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.

Point of Interest

If you have an interest in the CSS design technique and you also like to make your pages accessible to the Section 508 and WAI specifications, then you might be interested in taking a look at a template that was released on Community MX under the banner name of CMX JumpStarts. It is called Paris and it meets all of these objectives. It has been designed as a learning tool and is something you can use over and over again as a starting point for your website projects. This design is the first in a series that are city-based.