How to center a web page layout in Dreamweaver (or any other web design program): Duration 2:40

Click for step-by-step directions to Center an HTML Page Layout…

Update: The directions here have been updated to accomodate absolutely positioned divs. Thanks to Dianne Lewandowski for pointing out the issue. You can also view my video on Centering a CSS web page layout…

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.

As I mentioned earlier this week, I've been busily working to expand the amount of information we provide here at DWcourse.

Well, after some long hours and late nights, I'm proud to announce the release of Let's Get Started with Dreamweaver, my introductory mini-course to Dreamweaver.

It's a FREE 50+ page PDF that walks you step-by-step through the most basic steps you need to master when starting to work with Dreamweaver.

If you've been working with Dreamweaver for years, this information is probably old hat to you by now. However, if you're relatively new to Dreamweaver this mini-course covers everything I wish someone had told me when I first started using DW.

It covers the kinds of things that a lot of people screw up early on, get frustrated with, and then quit before even giving the program a real chance.

Ok, enough with the sales pitch. If you're interested just go enter your name & email address and I'll send it over to you.

If you're already registered for our newsletter you don't need to sign up again, there's a copy on its way to your inbox shortly.

Anyway, I really hope this helps and as always, if you have any questions feel free to email me or message me on Twitter.

IMPORTANT: With the announcement of Creative Cloud, Adobe has also changed its upgrade pricing policy. For CS6 only owners of CS5 and CS5.5 will qualify for upgrade pricing discounts. For more on this critical change and how it will affect your upgrade plans see Creative Suite: Upgrade, Wait for Creative Cloud or ???

Personally I considered Dreamweaver CS3, Adobe's first upgrade to the program after acquiring it, to be a "must have" update. Obviously, a lot of you didn't see it that way.

Lately I've fielded a lot of questions from people considering upgrading from Dreamweaver 8 (CS2) to Dreamweaver CS4. While it's fairly easy to find information about the incremental updates: from DW8 to CS3 and from CS3 to CS4 (links at the end of this post) I haven't found a source that offers an overview of what's in store if you make the leap from 8 directly to CS4. So I've put together a quick  overview with some brief comments of the features that await you at the end of the DW8 to DWCS4 upgrade process.

New in CS3

Overview: CS3 marked the beginning of the process of integrating Dreamweaver into Creative Suite but more importantly it was the first version of Dreamweaver  to support CSS (Cascading Style Sheets) styles and layout in a manner accessible to non-programmers. That feature alone made CS3 a required update in my book. Of course with the new functionality there was also a bit of a learning curve.

• Integration with Adobe Creative Suite
  • Copy and paste from Photoshop
• Improved CSS handling
  • Convert inline CSS to a rule
  • Built-in CSS-based page layouts

  Spry (AJAX) widgets and effects

  • Pop-out menus, "accordion" panels and more
  • Browser compatibility checking
    Hints
    Community-based help
• Tag Inspector: right click to view
• Adobe Device Central
  • Preview designs for mobile devices
• Better Intel support for Macs

New in CS4

CS4 continues Dreamweaver's integration into Creative Suite but the changes are more evolutionary than those in CS3. What you'll notice immediately is several UI (user interface) changes that may take a bit of getting used to. Other changes offer increase functionality - especially In-Context Edit and AIR Authoring - but you might never notice them if you don't go looking.

• Improved integration with Adobe Creative Suite
  • Photoshop Smart Objects automatically update placed images when the linked Photoshop image is changed
• New Workspaces
  • Built in workspaces: App Developer, App Developer Plus, Classic, Coder, Coder Plus, Designer, Designer Compact
  • Ability to create and save custom workspaces
• Related Files Bar
  • Easy access to linked JavaScript and CSS files
• Live View
  • View JavaScript and CSS effects within Dreamweaver
  • View effects of code changes "live"
• Improved code hinting
  • AJAX and JavaScript code hinting
• In-context  editing
  • Online editing through an Adobe hosted service
• HTML Datasets
  • Import tabular data from an HTML file into a sortable table
• Subversion Version Control
  • Improved version control for site with multiple authors
• AIR Authoring
  • Convert your web site into a stand-alone application
• Additional document viewing options
  • When viewing code and design in the Split view, the window can now be split vertically as well as horizontally (menu: View>Split Vertically)
  • Menu: View>Visual Aids> offers a variety of viewing options to make page elements more readily identifiable
• Code Navigator
  • Easily access code in linked files
• Layout Mode for "drawing" tables no longer available

The bottom line

Should you upgrade from Dreamweaver 8 to CS4?

In a word, YES. You'll get the benefit of two excellent updates, an improved UI and access to "modern" web technologies like CSS and AJAX.

What about the learning curve?

Make no mistake you may encounter a significant learning curve moving to CS4. How steep it is will depend upon your familiarity with advanced web technologies such as CSS. If the move to CS4 marks your first venture into CSS-based (as opposed to table-based) layout, expect a few headaches as the wonders (and eccentricities) of Cacscading Style Sheets are revealed.

However, if you're serious about web design, the transition to CSS is a requirement and CS4 offers the tools and templates to make the transition possible and rewarding if not always pleasant.

Additional resources:

• What's new in Dreamweaver CS3: An excellent step-by-step guide the differences between DW8 and CS3
• 6 Things To Like About Dreamweaver CS4
• Dreamweaver CS4 Features Overview (Adobe)

What's your experience?

If you've got information or tips that you'd like to share about the Dreamweaver upgrade experience or if you got questions before or after making the link, please leave a comment below.

Follow me on Twitter…