How to Create Relatively Positioned DIVs in Adobe Dreamweaver CS6
The precision and to-the-pixel positioning of AP (Absolute-Positioned) Divs in Adobe Dreamweaver CS6 can be quite liberating for designers, especially those who like the flexibility of print-based layouts.
However, on certain occasions, you may want boxes to flow inline with other content on the page. AP Divs float above other elements, so shifting other page content has no effect on their position, which can be a good or a bad thing.
For more traditional inline behavior, you can create DIVs that use relative positioning. This allows 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.
For this task, use the Insert Div Tag tool, which you can find within the Insert panel’s Common and Layout categories.
Follow these steps to create a relatively positioned DIV:
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.
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 list.
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.
If you have an existing class selector you want to apply, select it from the Class drop-down list; otherwise, leave it blank.
If an existing ID isn’t available, enter a new name in the ID field and click the New CSS Rule button to create one.
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.
When the CSS Rule Definition dialog box appears, click and select Positioning from the Category list on the left to view CSS positioning properties.
In the Positioning area, select Relative from the Position menu, enter a width and height value in the Width and Height text boxes, and enter a Top and Left value under the Positioning properties. Click OK.
Click OK to close the Insert Div Tag dialog box.
A new, relatively positioned DIV appears with placeholder text.
The Top and Left values behave slightly differently for absolute versus relatively positioned DIVs. In the case of relative positioning, these values indicate an offset from surrounding content, as opposed to a set position within the page.