Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the book Changing element alignment

Changing element alignment

The proposed design calls for the sidebar to appear on the left side of the layout, but this layout puts it on the right. Dreamweaver does offer HTML 4 layouts that match the design criteria much more closely, but it was hard to resist working with an HTML5 layout and all the new semantic elements. Besides, adjusting the layout is a lot easier than you may think.

  1. In Design view, insert the cursor anywhere in the right sidebar.
  2. Click the Code Navigator () icon, or right-click in the sidebar and select the Code Navigator option from the context menu.
  3. The Code Navigator window opens, displaying all CSS rule names that may affect the selected element.

  4. Identify the rule that aligns the sidebar to the right.
  5. The obvious culprit is the.sidebar1 rule, which contains the declaration float: right.

  6. In the CSS Styles panel, double-click the.sidebar1 rule to edit it.
  7. In the Box category, change the float property from right to left.
  8. Click Apply to preview the change.
  9. The sidebar moves to the left side of the layout.

  10. Save the file.
  • + Share This
  • 🔖 Save To Your Account