Bueno, este es tu código modificado por mí para conseguir el resultado que propones:
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WFD</title>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
#conteiner {
width:960px;
margin:0 auto; /* Centra el contenido */
height:auto;
}
#center {
float:left;
width:898px; /* 898px = Resta del ancho de #side1 y #side2 (total 62px) */
}
#side1 {
float:left;
height:800px; /* He cambiado el tamaño para que se ajuste a #box1-2-3. Puedes modificarlo tú. */
width:31px;
background-color:orange;
}
#side2 {
height:800px;
width:31px;
float:right;
background-color:orange;
}
#box1 {
height:244px;
background-color:green;
}
#box2 {
height:312px;
background-color:blue;
}
#box3 {
height:244px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="conteiner">
<div id="side1">
</div> <!-- End of side1 -->
<div id="center">
<div id="box1">
</div> <!-- End of box1 -->
<div id="box2">
</div> <!-- End of box2 -->
<div id="box3">
</div> <!-- End of box3 -->
</div>
<div id="side2">
</div> <!-- End of side2-->
</div> <!-- End of conteiner -->
</body>
</html>
Puedes eliminar los comentarios que están entre las etiquetas
/* */ y <!-- X -->
SUERTE!
Puedes ponerle el margen superior o inferior a #box1 y #box3...