RSM RSM - 3 months ago 20
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?

Answer

Most basic example (live example here):

CSS:

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

HTML:

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

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.

Comments