Distanziare i vari <div>

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

codice:

 <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

codice:

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ì