Was ist ein Wrapper

Ein Wrapper ist in der Regel ein Div-Container, der dafür da ist, eine Webseite zu zentrieren und eine bestimmte Webseitengrösse zu bestimmen.

Dabei wird in der Regel nach dem body-Tag ein erster Hauptcontainer gesetzt. Zum Beispiel so:

<html>
    <head>....</head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>		

Der Stylesheet bestimmt dann entsprechend den äusseren Abstand und die Breite der Webseite. Dies könnte in diesem Fall wie folgt aussehen.

body {
    margin: 0;
    padding: 0
}
.wrapper {
    width: 800px;
    margin: 0 auto;
}

In diesem Fall wird der Container so eingestellt, dass dieser eine Breite von 800 Pixel hat.

Die Margin-Angabe bedeutet:
0 = 0 Pixel von oben und unten
auto = automatischer Abstand von links und rechts

Hat der Body also eine Breite von 1200 Pixel, hat unser Wrapper einen Abstand nach links von 200 Pixel (1200 Pixel – 800 Pixel / 2 )

Möchte man, das der Abstand nach oben ebenfalls etwas grösser ist, sieht das ganze z.B. so hier aus

.wrapper {
    width: 800px;
    margin: 25px auto 0 auto;
}

Ein Simples Layout

Ein einfaches Grundgerüst könnte man anhand eines Wrappers zum Beispiel so bauen:

<html>
    <head>....</head>
    <body>
        <div class="wrapper">
            <header class="header">Titel</header>
            <section class="contentwrap">
                <nav class="navArea">Menu</nav>
                <article class="contentArea">Inhalt</article>
            </section>
            <div class="footer">Fusszeile</div>
        </div>
    </body>
</html>

Der passende Stylesheet:

body {
    margin: 0;
    padding: 0
}
.wrapper {
    width: 800px;
    margin: 0 auto;
}
.header {
    height: 120px;
    background-color: red;
}
.contentwrap {
    background-color: blue
}
.contentwrap:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.navArea {
    float: left;
    width: 100px;
    background-color: white;
    margin: 0 15px 0 0;
    padding: 0;
}
.contentArea {
    float: left;
     width: 685px;
    background-color: silver;
    margin: 0;
    padding: 0;
}
.footer {
    background-color: yellow;
    height: 50px;
    clear: both;
}

CSS-Frameworks (Leben, leichter gemacht)

Es gibt verschiedene CSS-Frameworks, die entsprechende Wrapper bereits mit liefern:

960 Grid:
.container_12, .container_16, .container_24
Diese zentrieren eine 960px breite Seite.Die Zahlen am Ende stehen für die Anzahl der Cols die dann die Seite verwendet
Blueprint:
.container
Dieser zentriert eine 950px breite Seite,standardmässig besteht die Seite aus 24 Cols
YAML:
.ym-wrapper
Ein komplexes CSS-Framework, welches eine Seite auf maximal 80em in der Mitte positioniert (dieses Framework ist nicht für Anfänger gedacht)
Es gibt natürlich noch andere Frameworks, ich persönlich verwende am liebsten Blueprint, da dies nicht zu überladen ist.