Update: The directions here have been updated to accomodate absolutely positioned divs. Thanks to Dianne Lewandowski for pointing out the issue.

I thought I’d expand a bit on my answer to a question from Brandon85 on Twitter. He asked:

Why is this so hard!! How do you Center a website in the browser using Dreamweaver?

Actually, it’s relatively easy (if you know how).

1. Begin by selecting your entire page in Design View.
2. Select menu: Insert>Layout Objects>Div Tag (or click on Insert Div Tag in the Common tab of the Insert Palette).
3. In the Insert Div Tag dialog:
   1. Select Wrap Around Selection (your entire design) from the Insert menu.
   2. Leave the Class field empty
   3. Type “wrapper” (without the quotes) into the ID field (this is assuming you don’t already have an item with the ID “wrapper.”
   4. Click the New CSS Rule button.
4. In the New CSS rule dialog
   1. ID should already be selected in the Selector Type menu.
   2. #wrapper should have been automatically inserted into the Selector Name field.
   3. Decide whether the new style should be in the current document or a new or existing style sheet and make your selection in the Rule Definition menu .
   4. Click the OK button.
5. In the CSS Rule Definition dialog:
   1. Select the Box category.
      1. Type in a Width. By default the horizontal width of a div is 100% so you need to set a width for the wrapper div to properly center it. Logically this should be the width (most likely in pixels) of your page design.
      2. Uncheck the Same for All option under Margin.
      3. Set the Right margin to auto by selecting auto in the pop-up menu to the right of the Right field.
      4. Set the Left margin to auto using the same method.
   2. Select the Block category
      1. Select left from the Text-Align menu (I’ll tell you why in a moment).
   3. Select the Positioning category
      1. Select relative from the Position menu. This forces any absolutely positioned divs in your page to align relative to the “wrapper” div rather than the browser window. See CSS positioning for more information on positioning.
   4. Click OK

Your design should now be centered but we still have one step to go.

Correction: The following work-around was originally mislabeled. It is intended for IE5 compatibility (and can probably be ignored by most folks)

Work-Around for Internet Explorer 5: If desired, we’ll need an additional fix to make this IE5 friendly.

1. Set the text-align property of the body style to center (This will center your page layout in IE5)
   1. If you already have a body style, double click on it in the Styles Palette to open the CSS Style Definition dialog.
   2. If you don’t have a body style, create a new one:
      1. Choose menu: Format>CSS Styles>New… (or select New… from the pop-up menu in the upper-right corner of the Styles Palette) OR
      2. In the New CSS Rule dialog:
         1. Choose Tag from the Selector Type menu.
         2. Type “body” into the Selector Name field.
         3. Decide whether the new style should be in the current document or a new or existing style sheet and make your selection in the Rule Definition menu .
         4. Click the OK button to open the CSS Style Definition dialog.
   3. In the CSS Style Definition dialog:
      1. Select the Box category.
      2. Select center from the Text-Align menu.
      3. Click OK

That explanation I promised: Setting the text-align property in the body style to center centers your page design but, since styles are inherited in CSS, it also centers all the text on your page. By setting text-align for #wrapper to left, we effectively overrule the centering for all page elements inside of #wrapper (which should be all of the page elements).

Funny how much a 140 character answer on Twitter can grow once it’s a blog post!

As always, feel free to email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

Question from @discuit via Twitter: A coder we use has coded the site in Absoloute DIVs, and now we can’t select any text in Design view. Any idea how to fix it?

Answer: Discuit, hover your cursor over the border of the div you want to edit (even one underneath another layer) until it highlights. Then click on border to select div. Now you can click inside the div and edit as usual.

Alternatively, you can also set the CSS visibility property to hidden for the top div in order to access the underlying div for editing. Just make sure you change it back!

Update: And, of course, I overlooked the obvious. Simply select the div you want to edit in Dreamweaver’s AP Elements tab. Once the div is selected,  you can click inside the div and edit as usual.

Follow me on Twitter: @TOONrefugee