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

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.