Centering a Page with CSS

Centering an HTML page with CSS

It’s actually not too hard to center a page using CSS. There are two ways to do it, both of which will be explained here.

METHOD 1: Centering a Fixed Width Page

Show/Hide Instructions

The first method centers a fixed width page. Fixed width means the content on the page will always be the same width.

Diagram: comparison fixed width page wide and narrow browser window

There are three styles that you have to apply. You can apply the styles to the body tag to affect the entire page.

    body{}
  1. You have to give the page a width.
    body{
          	width:750px;    
        }
  2. You set the left margin to auto.
    body{
          	width:750px; 
            margin-left:auto;   
        }
  3. You set the right margin to auto.
    body{
          	width:750px; 
            margin-left:auto;
            margin-right:auto;     
        }

The code in step 4 above is what the final CSS looks like for a site with a width of 750 pixels.

You can just copy that CSS above into your .css file and change the width number to match the width for your site.

If you want to do this using Dreamweaver’s CSS Panel the steps are:

  1. Click on the Add Styles icon
    .Add Styles Icon
  2. Put the body Tag as your selector and click OK
    Screenshot: Add Body tag as selector
  3. Click on the Box Category on the left of the next dialog box.

    Screenshot: Select box category
  4. Set the width to the width you want.
    Screenshot: Set width
  5. Uncheck the "Same for All" check box under Margin.
    Screenshot: Uncheck Same for All Margin
  6. Set the left and right margins to auto. Your dialog box should look something like the one below:
  7. Screenshot: Auto Margins, final settings

METHOD 2: Centering a Fluid width page

Show/Hide Instructions

A fluid width page means that the width of the content on the page grows and shrinks as the page grows and shrinks. Basically you will always have the same amount of margin on the left and the right and the content will adjust to the page size.

Diagram: fluid width centered page with narrow and wide browser window

 

To set this by hand you just set the left and right margins of the body tag (don’t set the width).

body{
        margin-left:50px;
        margin-right:50px;     
    }

When you set the margins with pixels they are always the same width.

The other option is to set the margins with percentages as shown below. This makes the margins always be a certain percentage of the total page (so both the margins and the width of the html page will grow and shring as the browser window is resized).

body{
        margin-left:15%;
        margin-right:15%;     
    }

Here is how you would do the above settings with the add styles dialog box in Dreamweaver

screenshot: Css dreamweaver dialog setting for fluid margins with pixels

screenshot: Css dreamweaver dialog setting for fluid margins with percentage

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>