<div id="header">
    <p>ヘッダー</p>
</div>
<div id="left">
    <p>左</p>
</div>
<div id="right">
    <p>右</p>
</div>
<div id="center">
    <p>センター</p>
</div>
<div id="footer">
    <p>フッター</p>
</div>

*        {
          margin: 0;
          padding: 0;
}

#header  {
          width: 100%;
          height: 200px;
          background-color: #808080;
}

#container {
           width: 100%;
}

#left    {
          width: 200px;
          height: 400px;
          background-color:#D8D8D8;
          float: left;
}

#right   {
          width: 200px;
          height: 400px;
          float: right;
          background-color:#D8D8D8;
}

#center  {
          height: 400px;
}

#footer  {
          clear: both;
          width: 100%;
          height: 150px;
          background-color: #808080;
}

ネガティブマージンとか使わずに、htmlでセンターをレフトとライトの後に記述したらできました。

高さ(height)は指定しない方が良いです。