How to Center a Page Layout with CSS Margins in Dreamweaver - dummies

How to Center a Page Layout with CSS Margins in Dreamweaver

By Janine Warner

Dreamweaver allows you to center your layout using CSS margins. Many web page designs are centered on the page so they seem to float between the sides of the browser window no matter how wide or narrow the window becomes. This helps create the illusion that the design fills the page, even if the browser window is much wider than the page design.

Most web page designs created with CSS achieve this effect by creating one <div> tag that surrounds all the page content and then applying a style to that <div> tag that includes a style rule that centers that <div> tag. As you discover in the following step-by-step instructions, creating a style to center a <div> tag is not as obvious as you might imagine but is easy to implement.

Common practice is to use an ID style for the <div> tag that centers your design, and to name it #wrapper or #container.

If your page isn’t already set up with a <div> tag around all your content, here’s a tip for adding one. First click and drag to select all text, images, and other content on the page. Then choose Insert→Layout Objects→Div Tag. In the Insert Div Tag dialog box, make sure the Wrap around Selection option is selected from the Insert drop-down list.

Leave the rest of the fields blank and click OK to add a <div> tag around all the contents of your page, and you’re ready for the steps that follow.

To center an entire page design, make sure that a <div> tag surrounds all of the contents of the page, and follow these steps:

  1. Click the plus sign in the CSS Designer Selectors panel.

    Depending on what is on the page, a new style name or a blank field where you can enter a style name is added to the Selectors panel.

  2. Double-click to select the name that Dreamweaver added to the panel and change it to the name you want for your new style, or click to select the blank field and enter a name.

    If no name is added, enter the name you desire in the empty field. You can name the style anything you like, but make sure to enter a period before the name if you create a class style, or a # sign for an ID style.

  3. In the Properties panel, specify the width, margins, and any other formatting settings you want to define.

    The width for the container <div> tag is set to 980 pixels. Here’s the trick to centering a <div> tag like this: Set the left and right margins to Auto. That way, a browser automatically adds an equal amount of margin space to each side of the <div> tag, effectively centering it on the page.


  4. Select the ID that surrounds all the content on the page.

    To make sure you’ve selected the right <div> tag, click to place your cursor anywhere in the main part of the page, and then click the <div> tag listed to the farthest left in the Quick Tag Selector at the bottom of the workspace.

  5. With the <div> tag selected, select the name of the style you created from the ID drop-down list in the Property inspector.

    The style rules you defined when you created the style are automatically applied to the <div> tag. In this example, the result is that the size of the <div> tag is changed to 980 pixels wide and the <div> tag and all its contents are centered on the page.

Not all features work when Dreamweaver is set to Live view. Although Live view is a great way to preview how your page designs will look in most modern web browsers, the use of the Live view feature makes many of Dreamweaver’s editing tools unusable. If, for example, the Property inspector appears dimmed when you want to use it, make sure that the Live button is deselected.