Webサイト運営ブログ

左にコンテンツ内容、右にメニューふたつを配したレイアウトの方法。

- HTML -

<div id="waku">
<div id="header">
ヘッダー
</div>
<div id="contents">

</div>
<div id="menu">
<div id="lside">
メニュー1
</div>
<div id="rside">
メニュー2
</div>
</div>
<br class="clear">
<div id="footer">
フッター
</div>
</div>


- CSS -

body{text-align:center;}
#waku{margin-left:auto;margin-right:auot;text-align:left;width:800px;}
#header{width:100%;}
#contents{width:445px;float:left;}
#menu{width:400px;float:right;}
#lside{width:198px;float:left;}
#rside{width:198px;float:right;}
#footer{width:100%;}
.clear{clear:both;}