XHTMLソース

<div id="content">
 <div id="main">
  <h2>横幅を文字数で指定するエラスティックレイアウト</h2>
  <p>
   横幅を文字数で指定するエラスティックレイアウトは指定した
   文字数でテキストが折り返す。従来のレイアウトだとピクセルや
   パーセントで指定していたこともあり、文字を拡大・縮小した際に
   1行あたりに含まれる文字数も変化してしまった。
   1行あたりに35〜40文字が読みやすいとされているのでこの視点から
   見るとエラスティックレイアウトは最適な手法といえる。
  </p>
  ...（略）...
 </div>
 <div id="navi">
  <div id="recentEntries">
   <h3>最近のエントリー</h3>
   <ul>
    <li><a href="#">最近のエントリー1</a></li>
    <li><a href="#">最近のエントリー2</a></li>
    <li><a href="#">最近のエントリー3</a></li>
    <li><a href="#">最近のエントリー4</a></li>
    <li><a href="#">最近のエントリー5</a></li>
   </ul>
  </div>
  <div id="monthlyArchives">
   <h3> 月別アーカイブ</h3>
   <ul>
    <li><a href="#">2007月6月</a></li>
    <li><a href="#">2007月5月</a></li>
    <li><a href="#">2007月4月</a></li>
    <li><a href="#">2007月3月</a></li>
    <li><a href="#">2007月2月</a></li>
   </ul>
  </div>
 </div>
</div>

CSSソース

div#container div#content {
     float: left;
     width: 56em;
     padding: 1em;
     background: #333;
}
div#container div#content div#main {
     float: left;
     width: 40em;
     margin: 0 1em 0 0;
     padding: 1em;
     background: #FFF;
}
div#container div#content div#navi {
     float: left;
     width: 13em;
     margin: 0;
}
div#container #footer {
     clear: left;
     width: 56em;
     padding: 1em 0;
}

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