Coding Monday: HTML/CSS Tips

Thursday, November 8, 2012

How to Center a Page in CSS

Conflicting margins can be frustrating and confusing when constructing a stylesheet for your website. However, centering your website is a common practice to avoid margin conflicts. Centering your website also helps with readability and works pretty well with dynamic display of content.

The following tutorials will show you how to center your website using an ID selector in CSS.

THINGS YOU MIGHT NEED:
CSS basic knowledge
HTML file
External CSS file

HTML File:

<body>
  <div id="page-wrap">
  all websites HTML here 
  </div>
</body>

External CSS File:

#page-wrap {     width: 800px;
     margin: 0 auto;
}

In other to avoid margin conflicts when resizing your window, it is very important to set the width of the selector to a giving pixel ( e.g 800px ) and also set the margin's initial value to 0 and auto to horizontally center the page.