Centering a Web Page

by cdwise 6. April 2010 04:47

I think how to center the contents on a web page is the single most common request on the Expression Web forum (but not in my Dreamweaver group).

You need 3 things to center a page:

  1. A valid doctype (EW does this by default)
  2. A container with a defined width (typically a div with an ID of container applied to it.)
  3. In the style definition for the container you need to have margin-left: auto; and margin-right: auto;

What you must not have are:

  1. Any position: absolute on divs or other elements on the page.
  2. Use of the spacebar ( ) to position elements - use margin, padding and/or floats instead.

#container {
width: 780px;
margin: 0 auto;
}

<div id=”container”>
  content goes here
</div>

Using Expression Web?

Another suggestion is that you think about how you want the page to look and create named styles that you can reuse because you know what they were created to do.

Instead of clicking on the format toolbar and creating a bunch of style1, style2, style3, etc.

Tags:

Comments are closed


Outstanding Hosting