左右にメニューのコンテナを配置し、真ん中に本文が出現するようなデザインです。
まずはHTMLソースを記述します。
<body> <h1>サイト名</h1> <h2>メニュー1</h2> <h3>サブメニュー1</h3> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <h3>サブメニュー2</h3> <ul> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> </ul> <h2>メニュー2</h2> <ul> <li>リスト9</li> <li>リスト10</li> <li>リスト11</li> <li>リスト12</li> <li>リスト13</li> <li>リスト14</li> <li>リスト15</li> <li>リスト16</li> <li>リスト17</li> <li>リスト18</li> </ul> <h2>トピック</h2> <h3>テーマ1</h3> <p>文字列</p> <h3>テーマ2</h3> <p>文字列</p> <h3>テーマ3</h3> <p>文字列</p> <h3>テーマ4</h3> <p>文字列</p> </body>
h2要素を基準に1セットとし、これをdiv要素でマーク付けしてコンテナとします。class属性を与えてそれぞれのコンテナに意味を与えます（注意すべきことは、class名には構造に関係する名称を与えるようにすることです。「右側に置くからclass="right"」などといった名付け方だと位置を変えるたびに変更しなければならなくなります。同様に、「大きくするからclass="large"」「青にするからclass="blue"」なども避けたほうがいいでしょう。）。
<body> <h1>サイト名</h1> <div class="mainmenu"> <h2>メニュー1</h2> <h3>サブメニュー1</h3> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <h3>サブメニュー2</h3> <ul> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> </ul> </div> <div class="submenu"> <h2>メニュー2</h2> <ul> <li>リスト9</li> <li>リスト10</li> <li>リスト11</li> <li>リスト12</li> <li>リスト13</li> <li>リスト14</li> <li>リスト15</li> <li>リスト16</li> <li>リスト17</li> <li>リスト18</li> </ul> </div> <div class="text"> <h2>トピック</h2> <h3>テーマ1</h3> <p>文字列</p> <h3>テーマ2</h3> <p>文字列</p> <h3>テーマ3</h3> <p>文字列</p> <h3>テーマ4</h3> <p>文字列</p> </div> </body>
例ではわかりやすくするためにdiv要素の周りに点線をつけています。
メニュー1（ここではclass="mainmenu"）、メニュー2（ここではclass="submenu"）は、左右の柱状になる部分ですので20%にします。トピック（ここではclass="text"）は、本文の幅は左右の幅を考慮して50%とします。
.mainmenu, .submenu {
width : 20%;
}
.text {
width : 50%;
}
メニュー1（ここではclass="mainmenu"）を左に、メニュー2（ここではclass="submenu"）を右に配置します。トピック（ここではclass="text"）は自動的にその真ん中に滑り込む形になります。
.mainmenu {
float : left;
}
.submenu {
float : right;
}
それぞれのコンテナの配置を均等にするために、コンテナ自体の余白をautoにします。
div {
margin : auto;
}
h1 {
text-align : center;
}
h2, h3 {
padding-left : .5em;
border-bottom : solid 3px green;
}
h2 {
background : yellow;
color : red;
}
ul li {
list-style-type : square;
}
p {
margin : 1em;
}
ここでは、h1要素の文字をセンタリング、h2要素、h3要素の文字の左に0.5emの隙間、実線で3pxで緑の下線を与え、h2要素には背景色黄色と文字色赤を指定。ul要素内のli要素のリストマークを四角にし、p要素に1emのマージンを与えています。
注意するポイントとしましては、floatプロパティを用いた場合、幅の指定が必要であるということです。
余談ですが、20%、20%、50%で90%ですが、余白をautoせず、トピック（ここではclass="text"）コンテナの左右に3%ずつの余白を与えた場合は、ブラウザによって解釈の仕方が変わります。
.text {
margin : 0 3%;
}
IE6での表示例
NN7での表示例
それぞれ左から3%と解釈しています。IE6では重ならないように処理しているために、メニュー1（ここではclass="mainmenu"）とトピック（ここではclass="text"）は隣接しています。NN7ではトピック（ここではclass="text"）が左から3%の位置に表示されているために、メニュー1（ここではclass="mainmenu"）と重なって表示されます。
2004.2.26