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

2 段組 レイアウトの例

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

この例では、ブラウザの横幅をある程度のサイズまで小さくすると
レイアウトが崩れます。ただし、パーセント指定の場合と違いメニュー部分は崩れません。

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

#container {
	width : 100%;
	background-color : #ffffff;
	padding : 10px;
}
#navigation {
	float: left;
	width: 200px;
	border : 1px solid blue;
}
#contents {
	padding-left : 205px;
	border : 1px solid red;
}