How to Create Swaps with Multiple Images in Dreamweaver
How to Use the Open Browser Window Behavior in Dreamweaver
How to Create Styles with Class and ID Selectors in Dreamweaver

How to Align Elements with Floats in Dreamweaver

Designers often align an image, a <div> tag, or another element to the left or right of a web page in Dreamweaver and then wrap any text or other content around that element. The image is aligned to the right of the column so that the text wraps next to it on the left. In the steps that follow, you find out how to create styles like this one.

[Credit: Image from istockphoto.com]
Credit: Image from istockphoto.com

CSS offers many advantages when it comes to aligning elements like this, but the way you set up these styles is not as obvious as you might expect at first because you use the float option.

After you understand that you can float elements, such as images, to the left or right side of a page, it’s pretty easy to create styles that accomplish this goal. In this exercise, you learn to create two styles that are ideal for aligning images to the left and right of a page, complete with a little margin just where you need it.

The CSS layouts included in Dreamweaver CC already have float styles that you can use to align elements to the right and left. These class styles are named .fltlft (for, you guessed it, float left) and .fltrt (for float right).

To create two class styles that you can use to align images and other elements to the left and right of a page, follow these steps:

  1. Click the plus sign in the CSS Designer Selectors panel.

    Depending on what is on the page, a new style name or a blank field where you can enter a style name is added to the Selectors panel.

  2. Double-click to select the name that Dreamweaver added to the panel and change it to the name you want for your new style, or click to select the blank field and enter a name.

    If no name is added, enter the name you desire in the empty field. You can name the style anything you like, but make sure to enter a period before the name if you create a class style or a # sign for an ID style.

  3. Double-click the new name and edit it as desired.

    Although you can name these styles whatever you prefer, alignment styles are commonly named with the abbreviated fltrt and fltlft, which stand for float right and float left respectively.

    For example, if you create a style to align elements to the left, you would name it .fltlft.

  4. In the Properties panel, click the icon that sets Float to Left.

    image1.jpg
  5. Use the Margin settings in the Properties panel to create a margin around the floated element.

    It’s good practice to add margin space to the opposite side from the float setting. If you're creating a style to float an image to the left, add 5 or 10 pixels of space to the Right margin field. When you align an image to the left side of the page, a margin will be created between the image and any other element that wraps next to the image.

  6. Select the image or other element you want to align in the page.

  7. Select the name of the style you created from the Class drop-down in the Property inspector.

    The style rules you defined when you created the style are automatically applied. If you had selected an image in a page of text, the image would move to the left side of the page and the text would wrap around it with a margin between the image and text.

  8. Repeat Steps 1–7, once with the float set to Right and 5 to 10 pixels of margin space in the Left margin field in the Box category, and again with the Float set to Left and 5 to 10 pixels of margin space in the Right margin field in the Box category.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Define Styles with the Tag Selector in Dreamweaver
How to Insert Audio and Video Files in Dreamweaver
How to Add Drop and Text Shadows in Dreamweaver
How to Change Background and Text Colors in Dreamweaver
How to Add and Format Text in Dreamweaver
Advertisement

Inside Dummies.com