Relatively Positioned DIV Creation in Adobe CS5 Dreamweaver

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver supports the creation and editing of DIVs that use relative positioning. Relatively positioned DIVs allow an element to be shifted along with content surrounding it, making for a more liquid layout. This type of positioning is important for nested content or any situation where items should fall in line with other page content.

Use the Insert Div Tag tool, which can be found within the Insert panel’s Common and Layout categories for creation or editing of a relatively positioned DIV.

  1. Click within your page to position the cursor within an existing AP Div and then click the Insert Div Tag tool under the Insert panel’s Common and Layout categories.

  2. When the Insert Div Tag dialog box appears, fine-tune the location of your new DIV by selecting a location from the Insert drop-down lis.

    For example, choose After Start of Tag to place it within an existing DIV tag in your page.

    You can also use the Insert Div Tag dialog box’s drop-down list to place the DIV before, after, or inside existing elements on the page. Leave the Insert drop-down list set to At Insertion Point to leave the box where you drew it or choose another location where you want the DIV created.

    Choose a specific location to create and place the new DIV.
    Choose a specific location to create and place the new DIV.
  1. If you have an existing class selector you want to apply, choose it from the Class drop-down list; otherwise, leave it blank.

  2. Assign an ID selector to the DIV to control its appearance by selecting from the ID drop-down list.

    If one isn’t available, enter a new name and click the New CSS Rule button to create one.

  3. When the New CSS Rule dialog box appears, be sure that your new selector is set to ID and that the name has a pound sign (#) in front of it. Click OK.

  4. When the CSS Rule Definition dialog box appears, click and select Positioning from the Category list on the left to view CSS positioning properties.

  5. In the Positioning area, select Relative from the Position menu, enter a width and height value in the Width and Height text boxes, and then click OK.

  6. Click OK to close the Insert Div Tag dialog box.

    A new, relatively positioned DIV appears with placeholder text.

    You can create a new DIV within another DIV.
    You can create a new DIV within another DIV.