Distanziare i vari <div>

[BlackCrow]

Salve a tutti, vi anticipo che sono un nuibbo del css e html

Il mio problema è che non riesco a separare i vari box all'interno del sito; con il seguente codice css

 <style> 
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
}
.principale {
width: 800px;
margin:  auto;
border: 2px solid #008000;
}
.header {
text-align: center;
background-color:#FF9900;
border: 1px solid #CCCCCC;
width: 100%;
height: 80px;
float:none;
}
.left {
text-align: center;
background-color:#6666CC;
width: 25%;
height: 600px;
float:left;
}
.maincontent{
text-align: center;
background-color:#FFCC99;
width: 75%;
height: 600px;
float:left;
}
 
.footer{
text-align: center;
background-color:#33FF33;
border: 1px solid #CCCCCC;
height: 50px;
clear:left;

}
</style>

e codice html

body>
<center>
<link href="stile.css" rel="stylesheet" type="text/css" />
<div class="principale">
<div class="header"> Header </div>
<div class="left"> Left </div>
<div class="maincontent"> Main Content </div>
<div class="footer"> Footer </div>
</div>
</center>
</body>

il risultato che ottengo è quello del file allegato, mentre a me servirebbe che uscisse così


come devo fare?

[Henry.Chinaski]

margin e padding
(per la Nazionale....)

[BlackCrow]

Già provato ma usandoli il riquadro Main Content finisce sotto Left perchè la somma dei px supera gli 800.

[Henry.Chinaski]

C'è poco da fare credo, per distanziare gli elementi non conosco altro che la proprietà margin. Se il contenitore deve necessariamene essere di 800px, prova con questo css.
Le larghezze sono in percentuale ed i margini verticali in px. A me sembra vada bene.
Però a me......
LINK

(sempre per la Nazionale.....)

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
}
.principale {
width: 800px;
margin:  auto;
border: 2px solid #008000;
}
.header {
text-align: center;
background-color:#FF9900;
border: 1px solid #CCCCCC;
width: 100%;
height: 80px;
float:none;
margin-top:8px;
margin-left:1%;
margin-right:1%;
margin-bottom:8px;
}
.left {
text-align: center;
background-color:#6666CC;
width: 24.25%;
height: 600px;
float:left;
margin-left:1%;
}
.maincontent{
text-align: center;
background-color:#FFCC99;
width: 72.75%;
height: 600px;
float:left;
margin-left:1%;
margin-right:1%;
}
 
.footer{
text-align: center;
background-color:#33FF33;
border: 1px solid #CCCCCC;
height: 50px;
clear:left;
width: 100%;
margin-top:8px;
margin-left:1%;
margin-right:1%;
margin-bottom:8px;
}

[BlackCrow]

ti ringrazio per l'aiuto ma come puoi notare sia Header che Footer escono fuori i margini del box principale

[Henry.Chinaski]

Lo vedo solo dopo aver letto il tuo commento ed aver provato la pagina su Chrome.
I.E. 8 non evidenzia l'anomalia.

Comunque setta footer e header con width:98%

[BlackCrow]

Ora sembra risolto, se si dovesse ripresntare il problema vi faccio sapere^^

Grazie