Design centrato

Obiettivo

Creare un layout con larghezza fissa posizionato al centro dello schermo come in figura

Layout centrato

Soluzione

Creiamo uno stile che chiamiamo container. Supponiamo di impostare la larghezza massima del nostro design a 760. Nel foglio di stile dovremo inserire

#container {
margin-left: auto;
margin-right: auto;
width: 760px;
padding: 0px;
}

A questo punto dovremo creare un tag <div id="container"> che racchiude il corpo del nostro design

<body>
<div id="container">
<div id="corpo">
. . . . . . . .
</div>
</div>
</body>

 

In questo modo otterremo il design voluto.

Ovviamente è possibile sbizzarrirsi per ottenere design più complessi come:

<body>
<div id="container">
<div id="intestazione">
. . . . . . . .
</div>
<div id="barramenu">
. . . . . . . .
</div>
<div id="corpo">
. . . . . . . .
</div>
<div id="piepagina">
. . . . . . . .
</div>
</div>
</body>