Creare una pagina con layout a 2 colonne e menu a destra

Posted on 01. May, 2006 by Administrator in css, tutorials


In questo articolo tratteremo come creare un layout a 2 colonne come in figura:



Defininiamo innazitutto la dimensione di tutto il bloco

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

Poi passiamo alla sezione "header":

#header {
padding: 5px;
margin-bottom: 5px;
border:1px solid #000;
}

Poi passiamo alla sezione centrale "content":

#content {
padding: 5px;
margin-right: 215px;
border:1px solid #000;
}

Poi passiamo alla sezione "destra":

#destra {
float: right;
width: 200px;
margin: 0;
margin-left: 5px;
padding: 5px;
border:1px solid #000;
}

Poi passiamo alla sezione "footer":

#footer {
clear: both;
padding: 5px;
margin-top: 5px;
border:1px solid #000;
}

e infine al codice della pagina

...
<body>
<div id="container">
<div id="header">header</div>
<div id="destra">destra</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
...


Correlati

One Comment

riki

15. Feb, 2008

bellissimo

Leave a reply