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

質問

下記のタグにてpositionタグを使って指定した場合
ＩＥの文字サイズを変更しるとcopyrightと言うboxが
ずれてしまいます。ずれない方法はありませんでしょうか？
お分かりの方のご回答をお待ちしております。
なお簡単なタグを記載してくれると幸いです。

body {
　　　margin-left:3em;
margin-left:3em;
}

.mainspace {
width:480px;
position:absolute;
left:260px;
padding-top:10px;
padding-bottom:10px;
}

.leftmenu {
width:200px;
height:280px;
position:absolute;
left:50px;
padding:5px;
}

.rightmenu {
width:200px;
height:280px;
position:absolute;
left:750px;
padding:5px;
}

.copyright {
text-align:center;
position:absolute;
left:50px;
top:480px;
　　　　　　width:900px
padding-bottom:10px;
padding-top:10px;
}

ＨＴＭＬ
<h1>タイトル</h1>
<div class="mainspace">
<h2>タイトル</h2>
<br>
<h2>タイトル</h2>
<br>
</div>
<div class="leftmenu">
<h3>メニュー</h3>
<ul>
<li><a href="">テスト</a></li>
<li><a href="">テスト</a></li>
</ul>
<h3>メニュー</h3>
<ul>
<li><a href=""></a>テスト</li>
<li><a href=""></a>テスト</li>
</ul>
<h3>メニュー</h3>
<ul>
<li>テスト</li>
<li>テスト</li>
</ul>
</div>
<div class="rightmenu">
<h3>サブタイトル</h3>
<br>
</div>
<div class="copyright">
test
</div>

回答No.3

noname#19206 · ベストアンサー

> 下記のタグにてpositionタグを使って指定した場合
> なお簡単なタグを記載してくれると幸いです。
position を"タグ"とは言いません。CSS のプロパティです。
何でもかんでもタグだと考えていると、今後不自由することがあると思うし、
無知な人間だと見られてしまうこともあると思います。
HTML,CSS,JavaScript など言葉は正しく覚えましょうね(^^)
http://www.fromdfj.net/html/divsyndrome.html#symptom11

さて、いったい何がずれるのかなどはわかりませんが、
スタイルシートのソースを見ると何箇所か全角スペースが入っていました。
コレではブラウザが正常にソースを解釈してくれません。
空白をあけるときは半角スペースまたはタブを用いるようにしてください。

お礼

返事が遅れてすいませんでした。
とても参考になりました。
ありがとうございます。

回答No.4

noname#20964

＞ＩＥの文字サイズを変更しるとcopyrightと言うboxがずれてしまいます。
文字の大きさを変えると上に配置した要素の縦の長さが変化してそれに合わせてcopyright部分が移動しないと言うことでしょうかね。
例えば文字サイズを中でtop:480pxを合わせると小にするとcopyright部分の上が隙間が開いてしまうし、小で合わせると逆に重なってしまうってことですかね。
それならoverflow:hiddenを入れればはみ出した内容を表示しませんので高さが変わらないと思います。
ただ内容が見えなくなってしまいますけどね。
結局positionを指定するならfont-sizeやline-heightを絶対値で指定した方が良いと思います。
それかfloatを使ったレイアウトかtableでレイアウトしちゃうかですね。
でも、わざわざpositionを使っている所をみるとテーブルやfloatは本当の内容が2番目や一番下になるので嫌なんですかね。

お礼

返事が遅れてすいませんでした。
とても参考になりました。
ありがとうございます。

回答No.2

noname#18500

この質問の直前の二つの質問に対する回答をまず見直してみてはいかがでしょうか？

幅が900pxで固定なら、コンテンツ、メニューを幅900pxの<div>で括ればそれぞれの細かい位置指定を省けますし、フッターまでをabsoluteで位置固定すると後々面倒ですよ。

お礼

返事が遅れてすいませんでした。
とても参考になりました。
ありがとうございます。

回答No.1

yambejp

>copyrightと言うboxが
>ずれてしまいます

「ずれる」という状態がどのようなものを
さしているかわかりませんが、私の見た限りでは
IE6でもFireFox1.5でもずれているようには
みえません。説明不足。

お礼

返事が遅れてすいませんでした。
ご回答ありがとうございます。