Come da titolo cerco aiuto per il css di un layout, avendo riscontrato problemi nella compilazione.
Ecco di seguito html e css.
---------------
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="centralbody">
<div id="menu">
menu
</div>
<div id="mainbody">
</div>
</div>
<div id="left">
<div id="leftsidebar">
</div>
<div id="boxleft">
boxleft
</div>
</div>
<div id="right">
<div id="rightsidebar">
</div>

<div id="boxright">
</div>
</div>
<div id="footer">
</div>
</div><!---container-->
</body>
</html>
-------------------------------

CSS:

body { background-color: rgb(240,240,240); font-family: Verdana; font-size: 2em;}
/* CONTAINER */
#container
{
width:1500px; height: 900px; margin:0 auto 0 auto;
}
/* HEADER */
#header
{
background-color: #404040;
border-style: solid; border-color: blue;
height: 100px;
text-align: center;
}
/* MENU DA METTERE SOPRA IL MAIN CONTENET, ALTEZZA FINO A QUELLA DEL DIV GIALLO, MARGIN-TOP 40PIX*/
#menu
{
background-color: #323232;
clear: both;
border-style: solid; border-color: orange;
margin:0 auto;
width: 860px; height: 70px;
margin-top: 30px;
}
/* MAIN-CONTANT */
#mainbody
{
background-color: #353030;
border-style: solid; border-color: #990000;
text-align: left;
margin:0 auto; width: 860px; height: 832px; /* 742*/
margin-bottom: 20px; /* margin:0 200px;*/
}
#left { float: left; }
#right { float: right;}
#centralbody { border-style: solid; border-color: brown;}
/* LEFTSIDEBAR */
#leftsidebar
{
background-color: #847B7B;
border-style: solid; border-color: yellow;
text-align: center;
float: left; /*clear: both;*/
width: 290px; height: 275px; margin:0 auto;
margin-top: 40px; /* margin-bottom: 20px; */
}


/* BOXLEFT DA METTERE ALLINEATO SOTTO LEFTSIDEBAR*/
#boxleft
{
background-color: #847B7B;
border-style: solid; border-color: green;
text-align: center;
/*float: left; position: relative; right: 280px;*/
width: 290px; height: 570px; margin:0 auto;
margin-top: 350px;
}


/* RIGHTSIDEBAR*/
#rightsidebar
{
background-color: #847B7B;
border-style: solid; border-color: yellow;
text-align: center;
float: right;
width: 290px; height: 275px; margin:0 auto;
margin-top: 40px; /*margin-bottom: 20px; */
}


/* BOXRIGHT DA METTERE ALLINEATO SOTTO RIGHSIDEBAR*/
#boxright
{
background-color: #847B7B;
border-style: solid; border-color: green;
text-align: center;
/*float: right; position: relative; left: 280px;*/
width: 290px; height: 570px; margin:0 auto;
margin-top: 350px;
}


/* FOOTER */
#footer
{
background-color: #353030;
border-style: solid; border-color: #CC6600;
height: 50px; margin:0 auto; width: 1400px;
text-align: left;
}
</style>


Il problema è il seguente: le colonne ai lati non si allineano con il centralbody (colore marrone)
Se è possibile risolvere con i div ve ne sarei grato, grazie. O comunque elencarmi tutte le possibilità.