Centering page content without tables

As web designers are gradually encouraged to abandon tables for page layout and switch to CSS (Cascading Style Sheets), one of the first problems they run in to is how to centre their design in the browser window regardless of screen size. Setting the margins of a positioned <div> (or layer, as Dreamweaver calls it) to "auto" should do the trick, but as so often happens, this method is not supported by all browsers.

Layout Designer 2 to the rescue

Fortunately for Dreamweaver users, Project Seven provides a free extension that solves this problem — and does a lot more besides. It's called Layout Designer 2 (LD2), and you can get the latest version with full instructions direct from PVII. As it's such a powerful extension, some people find it rather overwhelming. Others assume that LD2 does everything automatically, and can't understand when it doesn't work. That's not because of faults in the extension itself — far from it — but you do need to make sure you follow correct coding practice for Layout Designer 2 to do its job properly. The purpose of this brief tutorial is to help you avoid some of the most common problems that people run in to.

What LD2 actually does

Layout Designer 2 is actually two Dreamweaver behaviours in one:

Layout Designer 2 - Screen
Layout Designer 2 - Layers

The first positions Dreamweaver layers (divs) wherever you want in relation to the screen. The second positions layers in direct relationship to each other.

Both work in exactly the same way. LD2 searches for the top and left coordinates of each layer, measures the size of the screen, calculates the new position for each layer, and finally moves them there. Often, particularly on a slow connection, you can actually see the layers jump across the screen. Although impressive, it's not very elegant — but there is an easy solution (we'll come to that later).

So, for LD2 to be able to work its magic, it needs to know:

The left and top coordinates of each layer — these must be declared in pixels
The name (id) of each layer to be moved — these must all be unique
Where you want to move them — this is done by changing the necessary settings in the LD2 dialog box

Layout Designer 2 uses JavaScript to rearrange elements dynamically on the page, and when things don't work they way you expect, it's normally because of incorrect code in your original web page. Browsers often ignore minor errors in code on static pages, but once you make your pages dynamic, even the smallest mistake can stop things working.

When creating a positioned layer, its properties are contained in a CSS style definition. Although similar to HTML attribute/value pairs, there are important differences — a colon follows the attribute, not an equals sign; the value doesn't appear in quotes; and you must always specify a unit of measurement (such as pixels). When using the Dreamweaver Property inspector, it's easy to forget to add "px" (without the quotes) after the left and top coordinates. Also there should be no gap between the number and px. If you look in code view, you should see something like "left: 20px; top: 10px", not "left: 20; top: 10" or anything similar.
A lot of people get confused by the difference between "class" and "id". You can apply the same class to many elements on the same page, but an id should be used once and once only on the each page. Dreamweaver automatically gives each layer a different id, numbering them sequentially as Layer1, Layer2, etc, but when renaming them yourself or pasting material from elsewhere, it's easy to forget. If you do, Layout Designer 2 (or any other dynamic script) will have no idea which layer you're trying to move.

Two other problems are specific to Layout Designer 2, and stem from misunderstandings about how it works:

Leaving out the coordinates altogether (LD2 is brilliant, but not that clever)
Using coordinates other than left and top — although declaring right and bottom coordinates is perfectly correct CSS, they're not the ones used by LD2

Centering multiple layers...