ＣＳＳレイアウト マージンについて

質問

下記のタグにてメインスペースを両側10pxにしたいのですが、うまくいきません。
下記のようなレイアウトにてうまくmarginなどを行う場合は
どのようにしたらよろしいでしょうか？
なお簡単にタグを記載してくださいますと幸いです。

ＣＳＳ
body {
　　　margin:3em;
color:#339900;
background:#ffffff;
}

h1 {
padding:0.1em;
text-align:center;
leter-specing:1em;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.mainspace {
background:#aaaaaa;
width:480px;
　　　　　　margin-right:10px;
　　　　　　margin-left:10px ;
position:absolute;
left:260px;
}

.leftmenu {
background:#bbbbbb;
width:200px;
position:absolute;
left:50px;

}

.rightmenu {
background:#cccccc;
width:200px;
position:absolute;
right:50px;
}
ＨＴＭＬ
<h1>メインタイトル</h1>
<div class="mainspace">
<h2>サブタイトル</h2>
<p>
ただいまテスト中です。<br>
ただいまテスト中です。<br>
ただいまテスト中です。<br>
ただいまテスト中です。<br>
ただいまテスト中です。<br>
</p>
</div>
<div class="leftmenu">
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
</div>
<div class="rightmenu">
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
</div>

回答No.1

goulan · ベストアンサー

.mainspace {
background:#aaaaaa;
width:480px;
position:absolute;
left:260px;
}
.rightmenu {
background:#cccccc;
width:200px;
position:absolute;
left:750px;
}
こういう事でしょうか？
css の left right 指定は、左から、右から、になってしまいますので、当然 right指定は右からの距離となります。ですので、左マージン＋左メニュー＋マージン＋メインメニュー＋マージン の幅を指定すれば良いのでは？

全体をセンタリングなさりたいわけではないようですので、<h1> ~ </h1> のテキストのみセンタリングですから、メニューと中身が少々ずれますね。この全体の幅より広いウインドウで見た場合、右が広く空いてしまいます。まあ、好みだと思いますが。

お礼

解決いたしました感謝いたします。
ご回答ありがとうございました。