単純な2段組の例です。左側の幅を200pxに指定しています。
この例では、ブラウザの横幅をある程度のサイズまで小さくすると
レイアウトが崩れます。ただし、パーセント指定の場合と違いメニュー部分は崩れません。
<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>
#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; }