#header { width: 100%; } #container { float: left; width: 100%; } #boxA { float: left; width: 35%; } #boxB { float: left; width: 65%; } #footer { clear: left; width: 100%; }
<div id="header">header</div> <div id="container"> <div id="boxA">A</div> <div id="boxB">B</div> </div> <div id="footer">footer (clear: left;)</div>
※ 水色の線はAボックス、緑の線はBボックス、 グレーはcontainerボックス(親ボックス)です。
※ AボックスとBボックスには、box-sizing を指定していますので、未対応のブラウザでは正しく表示されないかもしれません。