Designing with CSS in Dreamweaver MX 2004 – Part 2: Working with Floats
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:
- Open the external2.html file, which you linked to your CSS file in Part 1.
- Add a
p
element to your page and insert several lines of text within the opening and closingtags.
- Switch to the Code view. You need to be able to place the image accurately that you are going to float.
-
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. -
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.
-
Once you have done that, switch back to the Design view (see Figure 14).
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.
Comments