XHTMLソース

<div id="header">
 <p> テキスト</p>
<!-- / #header --></div>
<div id="main">
 <div id="inner">
  <p> テキスト</p>
 <!-- / #inner --></div>
<!-- / #main --></div>
<div id="sub">
 <p> テキスト</p>
<!-- / #sub --></div>
<div id="footer">
 <p> テキスト</p>
<!-- / #footer --></div>

CSSソース

#header {
     height: 80px;
}
#main {
     float: left;
     width: 100%;
}
#inner {
     margin-left: 200px;
}
#sub {
     float: left;
     width: 200px;
     margin-left: -100%;
}
#footer {
     clear: both;
     width: 100%;
}

• サンプルダウンロード
• サンプルサイトを見る

• 第3章 用途と目的に合わせたレイアウトの法則