Learn how to use div tags to center blocks of content, create column effects, create different areas of color, and more.

You can create page layouts by manually inserting div tags and applying CSS positioning styles to them. A div tag is a tag that defines logical divisions within the content of a web page. You can use div tags to center blocks of content, create column effects, create different areas of color, and much more.

If you’re unfamiliar using div tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout based on one of the pre-designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS, but are familiar with using tables, you can also try using tables.

Insert div tags

You can use div tags to create CSS layout blocks and position them in your document. This is useful if you have an existing CSS style sheet with positioning styles attached to your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it.

  1. In the Document window, place the insertion point where you want the div tag to appear.
  2. Do one of the following:
    • Select Insert > HTML > Div.

    • In the HTML category of the Insert panel, click Div.

  3. Set any of the following options:

    Insert

    Lets you select the location of the div tag and the tag name if it is not a new tag.

    Class

    Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style sheet appear in the list. Use this pop‑up menu to select the style you want to apply to the tag.

    ID

    Lets you change the name used to identify the div tag. If you attached a style sheet, IDs defined in that style sheet appear in the list. IDs for blocks that are already in your document are not listed.

    Note:

    Dreamweaver alerts you if you enter the same ID as another tag in your document.

    New CSS Rule

    Opens the New CSS Rule dialog box.

  4. Click OK.

    The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of the box, Dreamweaver highlights it.

    If the div tag is absolutely positioned, it becomes an AP element. (You can edit div tags that aren’t absolutely positioned.)

Edit div tags

After you insert a div tag, you can manipulate it or add content to it.

Note:

Div tags that are absolutely positioned become AP elements.

When you assign borders to div tags, or when you have CSS Layout Outlines selected, they have visible borders. (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. You can change the highlight color or disable highlighting.

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.

  1. Do one of the following to select the div tag:
    • Click the border of the div tag.

    Note:

    Look for the highlighting to see the border.

    • 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 Designer to open the CSS Designer panel if it is not already open.

    Rules applied to the div tag appear in the panel.

  3. Make edits as necessary.

Change the highlight color of div tags

When you move the pointer over the edge of a div tag in Design view, Dreamweaver highlights the borders of the tag. You can enable or disable highlighting as necessary, or change the highlight color in the Preferences dialog box.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select Highlighting from the category list on the left.
  3. Make either of the following changes and click OK:
    • To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box).

    • To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.

    Note:

    These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer over them.

CSS layout blocks

You can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that you can position anywhere on your page. More specifically, a CSS layout block is either a div tag without display:inline, or any other page element that includes the display:block, position:absolute, or position:relative CSS declarations. Following are a few examples of elements that are considered CSS layout blocks in Dreamweaver:

  • A div tag

  • An image with an absolute or relative position assigned to it

  • An a tag with the display:block style assigned to it

  • A paragraph with an absolute or relative position assigned to it

Note:

For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls within a line of text), or simple block elements like paragraphs.

Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you float the mouse pointer over the layout block.

The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:

CSS Layout Outlines

Displays the outlines of all CSS layout blocks on the page.

CSS Layout Backgrounds

Displays temporarily assigned background colors for individual CSS layout blocks, and hides any other background colors or images that normally appear on the page.

Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process—there is no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help you differentiate between CSS layout blocks.

CSS Layout Box Model

Displays the box model (that is, padding and margins) of the selected CSS layout block.

View CSS layout blocks

You can enable or disable CSS layout block visual aids as necessary. To view all CSS layout blocks, select View > Design View Options > Visual Aids.

You can enable or disable CSS Layout Backgrounds, CSS Layout Box Model, and CSS Layout Outlines.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy