• bnote
• HTMLリファレンス
• cssリファレンス

2 段組 レイアウトの例

単純な2段組の例です。左側の幅を200pxに指定しています。

この例では、 position:absolute; を使用しています。

他にも左右の幅を固定にし、両方とも position:absolute と left
を指定する方法もあります。

HTMLの例

<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>

CSSの例

#navigation {
	position:absolute;
	width: 200px;
	border : 1px solid blue;
}
#contents {
	padding-left : 200px;
	border : 1px solid red;
}