How to Create Absolute-Positioned (AP) Divs in

Adobe Dreamweaver CS6

By Jennifer Smith, Christopher Smith, and Fred Gerantabee from Adobe
Creative Suite 6 Design and Web Premium All-in-One For Dummies
Adobe Dreamweaver CS6 uses CSS-controlled virtual containers,
or boxes,created by the DIV tag to freely position content on a page.
The DIV tag is a basic tag used to create areas for content on your page.
You can create DIV tags from several places in Dreamweaver, including the
Layout section of the Insert panel. Each DIV tag can have a unique ID style
assigned to it to control its position, appearance, and size. The process of
placing content often requires two steps: creating the DIV tag and then
creating its corresponding style.
Dreamweaver makes this task easy with the AP Div tool, which enables you
to draw boxes freely on the page and place content inside.
CSS treats most container elements on a page as boxes; this approach,
referred to as the CSS Box model, enables these elements to share uniform
properties such as padding, margins, width, height, and borders.
Although CSS can regard most any containing element on a page as a box
(such as a table or a list), DIV tags are most commonly used to create virtual
boxes that you can use to position text, images, and even nested boxes.
Each box can have its own width, height, position (via the top and left
properties), border, margins, and padding; each one is set using the
appropriate CSS properties.
To create AP (Absolute-Positioned) Divs, follow these steps:
1. Create a new page or open an existing page from your site.
2. On the Insert panel, select the Layout category.
3. Select the Draw AP Div tool.
The cursor appears as a cross hair when you move it back over the page.
4. Click anywhere on the page and drag to draw a new AP Div; release
the mouse button.

5. Move the mouse pointer over the edge of the box until it changes to
a 4-way arrow; click once and handles appear on all sides.
6. Click and drag any of these handles to resize the box vertically or
horizontally.
7. To move the box, click and drag it by the tab that sits on its top-left
edge and place the box where you want it on the page.
Take a look at the Property inspector, and you see the name as well as
many DIV properties listed.
8. If the CSS Styles panel isnt open, choose WindowCSS Styles to
open it; under the All panel, click to the left of the style sheet
(<style>) to expand it.
You see a new #apDiv1 ID style thats attached to the new AP Div you
created. For each new DIV created, Dreamweaver assigns apDiv with a
corresponding number in order of creation.

9. Click inside the new box to type, paste, or insert new content.
When you draw an AP Div on the page, two things occur: Dreamweaver
inserts a tag to create the box and creates a CSS ID selector that stores the
DIVs position, width, height, and other properties.
After you create an AP Div, you can type, paste, or insert content directly
inside it. You can also assign a class rule to any DIV from the Property
inspector most often for handling content formatting, leaving the ID selector
to control positioning and dimensions.