So, you’ve already designed your web page using GoLive layers (GoLive CS+) or floating boxes (GoLive 6 and older) and now you’d like that page to center in your browser window? The reason this is more complicated than it seems is because layers (read “floating boxes” if you’re using an older version of GoLive) have absolute positioning, and that positioning is measured from the top and left edges of the window. The top edge is no problem, but we need to make it measure from the center instead of the left edge. It’s not quite as simple as hitting a “center” button, but it’s not as difficult as it seems.
To get a Layers-based layout to center, we first need to add a wrapper DIV around the whole design. There’s no super-easy way to do this in GoLive’s layout editor, so switch to source view (this will be quick and painless, but it wouldn’t hurt to make a back-up first).
In source view, find the opening <body tag (should be right after the closing </head> tag). We need to add another line after the opening body tag – see arrow in image:
Now we need to add the start tag for a “wrapper” div (to tell the browser what to center with).
Add <div id=”wrapper”> in the new line after the <body> tag to look something like this:
(The indenting isn’t important – GoLive will take care of that). Next, scroll down to the bottom of the page and add a new line just above the closing </body> tag – see arrow in image…
We need to add a closing </div> tag just above the closing </body> tag. There may (or may not) already be a </div> tag just above the </body> tag, but we need to add yet another one. So, we should end up with something like this:
Now we’re finished with source view! Switch back to layout view mode in GoLive and click the stair-step-looking icon at the top left to open the CSS editor:
In the CSS editor, see if you already have a <> element (on the left) named <body>. If so, select that element to edit. If not, add a new CSS <> element (bottom left of css editor window) and name it body:
Select your new body style, select the alignment tag on the right and set the text alignment to “Center” as follows:
Now we’re almost done! We need to add a new ID (#) style and name it “wrapper” as follows:
For the style settings, set the text alignment however you want (usually left)…
Set the left and right margins for your wrapper to “auto”…
…and set the positioning to “relative”. Generally, set the height to “auto” and the width to a little larger than the total of the layout area you’ve already designed (in my example, it’s about 520 pixels). If you aren’t sure, you can either measure in GoLive or do a screen capture of your page in a browser and measure in another program:
If all went well, your wrapper div should now center in the browser window. Keep in mind that the layout will still appear left aligned in GoLive CS’s layout view, so test/preview in your web browser.