Designing with CSS in Dreamweaver MX 2004 – Part 2: Working with Floats
Working with Floats
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
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
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
pelement to your page and insert several lines of text within the opening and closing
- 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
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.