単純な2段組の例です。左側の幅を200pxに指定しています。
この例では、 position:absolute; を使用しています。
他にも左右の幅を固定にし、両方とも position:absolute と left
を指定する方法もあります。
<div id="container"> <div id="navigation"> <ul> <li>bnote</li> <li>HTMLリファレンス</li> <li>cssリファレンス</li> </ul> </div> <div id="contents"> <h1>2 段組 レイアウトの例</h1> <p> 単純な2段組の例です。左側の幅を30%に指定しています。 </p> </div> </div>
#navigation { position:absolute; width: 200px; border : 1px solid blue; } #contents { padding-left : 200px; border : 1px solid red; }