スタイルシートを使用したサイト作りで
サイトページの真ん中に４５０ｐｘの白の柱に本文を入れ、周りをすべて黒というスタイルにしたく思ってます。
柱をウィンドウの上から下まで表示したいのですが、どうしてもうまくいきません。どうぞ御指南下さい！！作ったタグを載せます。
*{margin:0; padding:0; font:normal normal normal x-small/1.5em Verdana,"ＭＳ ゴシック",Osaka,Gothic,sans-serif;}
body{ height:100%;
background-color:#000000;
color:#000000; cursor:default;}
br{ letter-spacing:normal;}
#body{margin:0px auto; width:450px; height:100%; background:#ffffff;}
#header{padding:0px}
#menu{padding:0px 0px 5px; text-align:center;}
#main{padding:0px 10px;}
#navi{text-align:right; padding:0px 10px;}
#foot{height:123px;
background:url(img/img2.gif) no-repeat 0% 0%;}
.text{padding:0px 0px 10px;}
p{padding:1px 0px;}
h1,h2{font-weight:bold;}
h1{text-align:center; color:#666666; font-size:190%; padding:10px 0px 0px;}
h2{ text-align:left; color:#000000; font-size:100%; padding:0px 2px; margin:5px 0px;}
サイトページ
<body>
<div id="body">
<div id="menu">
<h1 id="TOP">- ABOUT - </h1>
</div>
<hr class="none">
<hr class="none">
<div id="main">
<h2>test</h2>
<div class="text">
<p>test</p>
</div>
<h2>test</h2>
<div class="text">
<p>
test
</p>
</div>
</div>
<div id="navi">
<p>INDEX // <a href="#TOP">PAGE TOP</a> // </p>
</div>
</div>
</body>
</html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ありがとうございます。 理解できました！