Working with div tags for layout

Working with div tags for layout

After you insert a div tag (see Inserting div tags for layout), you can manipulate it or you can add content to it.

Div tags have visible borders when you’ve assigned borders to them, or when you have CSS Layout Outlines selected. (CSS Layout Outlines is selected by default in the View > Visual Aids menu.) When you move the pointer over a div tag, Dreamweaver highlights the tag. To change the highlight color or disable highlighting, see Changing the highlight color for div tags.

When you select a div tag, you can view and edit rules for it in the CSS Styles panel. You can also add content to the div tag by simply placing your insertion point inside the div tag, and then adding content just as you would add content to a page.

To view and edit rules applied to a div tag:

  1. Do one of the following to select the div tag:
    • Click the border of the div tag.
    • Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice.
    • Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window.
  2. Select Window > CSS Styles to open the CSS Styles panel if it is not already open.

    Rules applied to the div tag appear in the panel.

  3. Make edits as necessary.

To place the insertion point in a div tag to add content:

  • Click anywhere inside the tag’s borders.

To change the placeholder text in a div tag:

  • Select the text, and then type over it or press Delete.

Related topics

  • Inserting div tags for layout
  • Using the CSS Styles panel

Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Laying Out Pages with CSS
Managing Templates
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly