RSM RSM - 1 month ago 5x
CSS Question

Correct way to do a css wrapper

I have heard a lot of my friends talk about using wrappers in CSS to center the "main" part of a website.

Is this the best way to accomplish this? What is best practice? Are there other ways?


Most basic example (live example here):


#wrapper {
    width: 500px;
    margin: 0 auto;


    <div id="wrapper">
        Piece of text inside a 500px width div centered on the page

How the principle works:

Create your wrapper and assign it a certain width. Then apply an automatic horizontal margin to it by using margin: 0 auto; or margin-left: auto; margin-right: auto;. The automatic margins make sure your element is centered.