1. Home
  2. Computing & Technology
  3. Web Design / HTML

How To Use CSS to Center a Document with a Liquid Layout

By Jennifer Kyrnin, About.com

It's easy to center a liquid layout with CSS. And centering a layout is one of the more popular ways of laying out a Web page.
Difficulty: Easy
Time Required: 10 minutes

Here's How:

  1. Create a new Web page with a CSS style sheet in your HTML editor.
  2. Create a div element as the main element on the page where you'll store everything on the page.
    <div> </div>
  3. Give that div element an ID that is unique on the page.
    <div id="main"> </div>
  4. Open your CSS style sheet and add margins on the right and left of the #main div element.
    div#main {
      margin-left: 15%;
      margin-right: 15%
    }
  5. Save your page and your style sheet.
  6. Test in several Web browsers.

Tips:

  1. Make the margins even on both sides.
  2. The margins can be any unit of measure, as long as they are the same.
  3. This will center the layout box but not the content within it. Use text-align to center the inner content.
  4. This layout will flex to match the width of the browser screen.
More Web Design / HTML How To's

Explore Web Design / HTML

More from About.com

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. CSS
  5. CSS Centering - How to Center a Liquid Layout Document with CSS

©2008 About.com, a part of The New York Times Company.

All rights reserved.