ＣＳＳレイアウトについて

質問

今まで参考書を見ながら参考書どおりにＨＰを作っていましたが、
それでは自分どおりのＨＰが作ることができないと思い、
タグ辞典などを見ながら自分でＨＰ作成を行うことにしたのですが、
ＣＳＳにて５個のボックスを作成して５個それぞれで
色分けしたあとにpositionにて位置を指定しましたが
うまくいきません。
自分が考えているレイアウトは
１個目のボックスはタイトルで一番上にあり
２個目のボックスは左メニューで左側にあります。
３個目のボックスはメインスペースで中央にあります。
４個目のボックスは右メニューで右側にあります。
５個目のボックスはコピーライトで一番下にあります。
どなたか解決できる方のご回答をお待ちしております。
またこの場にて簡単なタグを記載していただければ幸いです。

回答No.1

grizzlycat · ベストアンサー

とりあえずこんなでどうですか？
positionで作ってみました。

【CSS】
body {
text-align: center;
}

#layout {
text-align: left;
margin: 10px auto;
width: 700px;
background: #ffffff;
}

#header {
background-color: #aaaaaa;
height: 3em;
}

#contents {
position: relative;
margin: 0.25em 0;
width: 100%;
}

#main {
margin: 0 10.5em;
background-color: #dddddd;
}

#left {
position: absolute;
width: 10em;
left: 0px;
top: 0px;
background-color: #bbbbbb;
}

#right {
position: absolute;
width: 10em;
right: 0px;
top: 0px;
background-color: #cccccc;
}

#footer {
background-color: #aaaaaa;
height: 3em;
}

【HTML】
<div id="layout">
<div id="header">ヘッダー</div>
<div id="contents">
<div id="main">メインBOX<br /><br /><br /><br /><br /></div>
<div id="left">メニューBOX<br /><br /><br /><br /><br /></div>
<div id="right">サブメニューBOX<br /><br /><br /><br /><br /></div>
</div>
<div id="footer">フッター</div>
</div>

お礼

解決できました！
ご回答ありがとうございました。