floatによる右側可変ヘッダー付レイアウト

#leftbar{
  float: left;
  width: 200px;
  margin-right: -200px;
  background: #c8dae1;
}

floatを使用して左200px固定、右を可変幅で2段組を作成しています。
段組をdiv id="container"で包含してwidthを70%に指定しています。

#header {
  border: 1px solid #e6e6e6;
}

div要素でなくてもいいのですが、div id="header"とh1要素を追加しています。

#container {
  margin-left: auto;
  margin-right: auto;
  width:70%;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

#content{
  float:left;
  width:100%;
}
#content * {
  margin-left: 230px;
}

footerで回り込みを解除します。

#footer {
    clear: both;
    border-top: 1px solid #e6e6e6;
}

floatさせるものには、必ずwidthを指定しましょう。

Footer