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

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-left: 215px;
border:1px solid #000;
}

Poi passiamo alla sezione "sinistra":

#sinistra {
float: left;
width: 200px;
margin: 0;
margin-right: 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="sinistra">sinistra</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
...


Correlati

2 Comments

marco

04. Mar, 2008

grazie :)

Serena

04. Mar, 2008

Ciao!!Cercavo una protezione gratuita per le creazioni che ho nel mio space..
So che ci sono alcuni codici che hanno questa
funzionalitą, ma non riesco a trovarli!!
Aiutoo…

Leave a reply