CSSで、二つの要素を並べると、何故か意図したマージンでないマージン設定になります。解消方法がないでしょうか

質問

問題要素は包含ブロック(#main-area)内の左要素(#nv-global)と右要素(#main-area-cts)の配置です。
両左右要素は「#main-area」の位置から5px空け、左要素は左から5px空け、右要素は左要素の終わりから5px空けるのが希望ですが、topやmarginで色んなパターンを試してもIE・Firefoxでバッチリになりません。解消方法がないものでしょうか。
以下ソースです。
【HTML】
<div id="wrapper">
<div id="hdr-all">
<div id="hdr-area">
<div id="hdr-vi">
<h1><img src="../img/share/hdr_vi.gif" alt="サイト名" /></h1>
</div>
ヘッダーエリア</div>
<div id="hdr-line"></div>
</div>
<div id="main-all">
<div id="main-area">
<div id="nv-global">
<ul>
<li><a href="index.html"><img src="../img/share/nv_lft01.gif" alt="ホーム" width="177" height="55" id="Image1" /></a></li>
<li><a href="../corp/index.html"><img src="../img/share/nv_lft10.gif" alt="会社情報" width="177" height="55" id="Image10" /></a></li>
</ul>
</div>
<div id="main-area-cts">
<table width="557" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../img/share/cts_frm_top.gif" width="557" height="21" /></td>
</tr>
<tr>
<td width="21" background="../img/share/cts_frm_lft.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td>
<td width="515" height="500" valign="top" bgcolor="#F6F6F6">コンテンツエリア</td>
<td background="../img/share/cts_frm_rht.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td>
</tr>
<tr>
<td colspan="3"><img src="../img/share/cts_frm_btm.gif" width="557" height="21" /></td>
</tr>
</table>
</div>
</div>
<div id="main-line"></div>
<div id="ftr-all">
<div id="ftr-area">フッターエリア</div>
<div id="ftr-line"></div>
</div>
</div>
</div>

【CSS】
body {
margin: 0 auto;
background: #5ca786;
font-family: "Osaka";
font-size: 12px;
letter-spacing: 1px;
line-height: 150%;
color: #333333;
}
#wrapper {
margin: 0px auto 0px auto;
width: 100%;
height: 100%;
background: #333333;/*Total BG Color*/
text-align: left;
}
#hdr-all {
margin: 0px 0px 0px 0px;
width: 100%;
height: 112px;
background: #a2d8c0;
}
#hdr-area {
margin: 0px 0px 0px 0px;
width: 749px;
height: 112px;
background: url(../img/share/bg_hdr.jpg) no-repeat;
float: left;
}
#hdr-line {
margin: 0px 0px 0px 0px;
width: 1px;
height: 112px;
background: url(../img/share/line_rht.gif);
float: left;
}
#main-all {
margin: 0px 0px 0px 0px;
width: 100%;
height: 100%;
background: #5ca786;
}
#main-area {
margin: 0px 0px 0px 0px;
width: 749px;
height: 100%;
background: #266e4e;
float: left;
overflow: auto;
}
#main-line {
margin: 0px 0px 0px 0px;
width: 1px;
height: 100%;
background: url(../img/share/line_rht.gif) repeat-y;
float: left;
}
#nv-global {
top: 5px;
left: 0px;
margin: 5px 0px 0px 5px;
width: 177px;
padding-bottom: 30px;
background: #7bb395;
float: left;
}
#nv-global ul {
}
#nv-global li{
}
#main-area-cts {
top: 5px;
left: 187px;
margin: 5px 0px 0px 0px;
width: 557px;
padding-bottom: 30px;
background: #266e4e;
float: left;
}
#ftr-all {
margin: 0px 0px 0px 0px;
width: 100%;
height: 150px;
background: #FFFFFF;
}
#ftr-area {
margin: 0px 0px 0px 0px;
width: 749px;
height: 150px;
background: #FFFFFF;
float: left;
}
#ftr-line {
margin: 0px 0px 0px 0px;
width: 1px;
height: 150px;
background: url(../img/share/line_rht.gif) repeat-y;
float: left;
}

回答No.9

abril · ベストアンサー

たびたびすみません、ANo.8、訂正です。

> その上で、上記4つの各コンテナブロックのbackgroundプロパティの定義を、
> #各id名 {
> （省略）
> background: url(../img/share/各背景画像.gif) left top repeat-y #各背景色;
> }

プロパティの最後、”背景色”を指定しまっては元も子もありませんね。初期値のtransparentのままでなければ…失礼しました。

回答No.8

abril

> テンポラリーのアップは最初からやりたいほど思っているところですが、
> 私の顧客のサイトなため、社名から何から固有情報が多過ぎて、テンポラリ用に編纂するのも大仕事になりますので、関係ソースだけの編纂・紹介にとどめておりました。

ご事情、了解致しました。

> この1pxラインは、縦が2pxあります。1×1の透明部位と、その下に
> 1×1のグレーの部位でできています。
> なので、今でさえこの1pxのライン部分は３つの行に分かれているのに、
> また追加されて合計４つの行に分かれてしまうと、透明で終わった行の次の行は透明からスタートするので、この切れ目が、
> 本来、透明・グレー・透明・グレー～～～
> とならなければならないのに、
> 透明・透明・グレー・透明～～～
> というようにずれてきてしまいます。
> こうならないようにしたいのですが・・・・
>
> 一番いいのは、コンテンツエリアとそのすぐ右からはじまる余白部分との仕切り線であるこの縦1pxの画像ラインは、行を分割することなくで
> きたらいいのですが、行ごとに右側の余白のBGカラーも色が違うため、できなかったのです。

ああ…左から750pxに引かれるラインはsolidな画像ではなくdotだったのですね。それでお悩みのポイントがよくわかりました。
確かに今のデザインでは、メインのコンテナブロックの高さが可変という事もあるのでで、ドットの繰り返し位置を完璧にシームレスにするのは難しいでしょうね。
右余白の背景色がヘッダー・メイン・メイン下・フッターという4つのコンテナブロックで違わないのであれば、#wrapperに左から751pxの位置で画像をレンダリングさせれば済む話なのですが。

すごく回りくどい手なのですが、1つ考えられるかもしれない手段として。

まず、bodyにコンテンツ全体を貫くラインを背景で引かせることにします。
body {
（省略）
background: url(../img/share/line_rht.gif) 751px 0 repeat-y #5ca786;
}
それから、#wrapperからbackgroundプロパティを削除します（現在の指定も子要素の各コンテナブロックのwidthが100%なので、事実上無効かと）。

#hdr-all、#main-all、#main-all2（新たに追加された上から3つ目の主要コンテナブロックを仮にそう呼びます）、#ftr-allそれぞれの背景を、現在の背景色から背景画像使用に切り替えます。その背景画像ですが、左から750pxまでは元々の背景色で塗りつぶし、751px目を透過し、752px目からは再び背景色で塗りつぶします。垂直方向にしかレンダリングできないので、高さは10px～ぐらいでかまいませんが、横幅は高解像度のディスプレイでも足りる様に、2000pxぐらいにします。

その上で、上記4つの各コンテナブロックのbackgroundプロパティの定義を、
#各id名 {
（省略）
background: url(../img/share/各背景画像.gif) left top repeat-y #各背景色;
}
とします。
#hdr-line及び#ftr-lineは#main-lineと同様不要になりますので、HTML側から削除します（ちなみにラインを引くためだけで中身が空のブロック、というのは論理構造上おかしいので、できるだけ他の要素にラインの処理も含めることをお奨めします）。

そうすると、丁度左から751pxの箇所が透過状態なので、親要素のbodyで引かれたラインがぶち抜きで見える…という状態になるかと。

ただしこれは検証していません。今頭の中で考えた事ですので、もしかしたらうまく行かないかもしれません。
その場合は、どこかで妥協するしかないと思います。ラインを継目のわからないソリッドな画像にするか、右余白を単一色にするか、ドットの継ぎ目が成り行きで1pxのずれが出てしまっても目をつぶるか…

※ちなみに、bodyのスタイルを見ていて今頃気づいたのですが、font-familyの指定がOsakaになってますよね。ということは質問者様のメインの環境はMac OSですか？SafariでもANo.4での表示結果は確認してありますが、やはり私の見る限りでは幅は750pxになっていました。

お礼

貴方様には本当に世話になってしまいました。
感謝申し上げます。

ご提示の別の手法ですが、私もTable時代にはこのような横長や縦長の画像による背景表現をおこなうことがありました。
今回のCSS手法でもこの手法を取り入れなくてはならないかも知れませんね。

時間がないのでいったんは今の2～3pxはみ出しとドットライン繰り返さない状態のままをベースHTMLとしてしまいます。
本当はベースHTMLは完全にしてから各ページをつくっていきたかったのですがいたしかたありません。
慎重な置換手法も使えるやもしれないのでとりあえず前に進みます。
眞にありがとうございました。

といってもまた別のCSS表現で書き込むことはあると思いますが^^;

補足

追記
font-familyはいったんエディタへコピペしたら文字化けしたので、とりあえずosakaだけ残して使った次第です。Macではないです。WindowsXP環境です。
Macも動作確認用で以前のように持ちたいですが・・・・

回答No.7

abril

> ただ、幅750pxでないといけないのに、まだ753か754pxあります。

そうですか？私の先程申し上げた環境上では、試しに適当な箇所に左端を基点としたW750px×H1pxのラインを画像で引いてみたのですが、そのグリッドを見る限り、右端に垂直方向に引かれたラインとぴったり交わって見えておりますので、ヘッダー・メイン・フッターの幅はそれぞれ750pxである様に思えるのですが…

残りの補足に関してはちょっと実際のイメージがわかりにくいものもありますし、サイズが明示されていない画像などもある為、想像によるダミー画像で追い切れない部分もあります。可能であれば、一時的に現在作成中のものをWeb上にアップしてURLを提供して頂けると一番話が早いのではないかと思います（確か別スレッドではテンポラリでその様な手段を取られていたかと思いましたので）。

※ちなみにこの後しばらく私自身は閲覧できない状態になりますので、その間に他の回答者様からナイスな回答が出た場合はスルーさせて頂きます。

お礼

いやいや本当に何度もありがとうございます。
ここまででもう十分です。だいぶん助かりました。

テンポラリーのアップは最初からやりたいほど思っているところですが、
私の顧客のサイトなため、社名から何から固有情報が多過ぎて、テンポラリ用に編纂するのも大仕事になりますので、関係ソースだけの編纂・紹介にとどめておりました。

回答No.6

abril

たびたびすみません、ANo.5の修正です。

#main-area-cts {
float: right;
width: 557px;
margin: 0;
padding: 0 1px 30px 0;
background: url(../img/share/line_rht.gif) right top repeat-y #266e4e;
}

paddingの一括指定、rightの1pxをleftに記述しておりました。ケアレスミス、お詫び致します。

回答No.5

abril

ANo.4の修正です。結果は同じですが、プロパティの記述はなるべく簡潔に整合性を持ちたいので。

#main-area-cts {
float: right;
width: 557px;
margin: 0;
padding: 0 0 30px 1px;
background: url(../img/share/line_rht.gif) right top repeat-y #266e4e;
}

あと、これは余計なことかもしれませんが、一連のスレッドの質問は同一のサイトのレイアウトについての事だと思うので、ついでにコメントさせて頂きます。http://oshiete1.goo.ne.jp/qa3900200.html　の補足で仰っていた下記のコメントについてです。

> 当方、Tableレイアウト時にサイトをつくりにつくっていて、
> Tableの場合、デザインを凝りまくれ、クライアントもそこを買って
> もらっていましたが、二年強業務から離れている間にCSSが主流になって
> いました。
> SEOの知識もとことん追求したので、今はCSSで制作しようと決めて取り組んでおりますが、CSSは極上デザインとSEOの両輪を兼ね備えたノウハウが見当た
> らず、四苦八苦しております。デザインレベルを下げればどうということもないのですが、1pxもずれがないほどにデザインを落とし込んでいるので固執
> しなければなりません。

確かに、CSSが普及していなかった10年前ぐらいはtableを複雑に使いこなしてガチガチのレイアウトを組み上げる事が主流だった時期もあります。その頃からコーディングに携わっている人間なら、必ずtableをいくつも入れ子にして凝ったレイアウトを完成させる事に意義を見出す「若気の至り」的時期も通っているでしょう。私もそうです。しかし、それはtableの本来の役目を大きく逸脱して「相応しくない」方向にどんどん拡大させていたに過ぎません。

また、HTMLによるWebコンテンツは、そもそもが印刷物の様な絶対的な視覚結果を持つメディアではありません。閲覧者の環境により、相対的な結果しか得られない／閲覧者の任意で表示結果をコントロールできるコンテンツであることが義務づけられているのです。そういう意味からすると、1pxもずれる事の許されない（各要素が逃げ場をどこにも持てない）デザイン、というのは結局制作者の首を絞める事になるだけだと思いますし、閲覧者にとっても決して使い勝手の良いものだとは言えないのではないでしょうか。その様なデザインはそもそも「Webというメディアのデザイン」として、”極上デザイン”と言えるのかどうか…？というのが、コーダーでありまた一閲覧者でもある者からの率直な意見です。リキッドであること、フレキシブルであること、シンプルであること、はデザイン・レベルを下げる、ということには直結しないと思いますので。

蛇足失礼致しました。考慮の余地がない様でしたら無視して下さい。

お礼

修正案もありがとうございます。

おっしゃることはよく理解できます。

ただ、1pxもずれることが許されないという表現は、どこもガチガチという意味ではなかったんです。大雑把に書いたので誤認をさせてしまいました。

要は、可変する箇所と可変しない箇所を緻密に計算してつくる、
ということです。

ウィンドウが最大サイズにされた場合にミドルコンテンツ量が少ないのに、フッターは最下段にちゃんと存在できるとか、コンテンツ幅は800pxだけども、右側の余白の背景色はずっと右端まで延びているとか、仕切り線がどんな状況でも天地100%レンダリングされているとか、文字サイズを変更されてもレイアウトが崩れないとか、
そういった意味です。
どこもかしこもガチガチに固定するという意味ではありません。
Table時代もそういう意味につくっていました。

回答No.4

abril

※ANo.3様の回答に付けられた以下の補足のみに着目、これまでの経過の詳細は把握していません。

> 書いていただいたソースを見ながら自分のソースと違うところを見つけて
> 修正していきましたが、どうしても意図にならない箇所が複数あり続けます。
> ●中段(main)の横幅が750pxのところが753か754pxになって右にはみ出てしまう。
> ●中段(main)の左から750px目に幅1pxで表示させる縦100%の画像ラインが繰り返してくれない

標準モードで、ですよね。
”ANo.3様の回答内容をそのままHTML、CSSに貼り付けて”検証してみました。
そこから以下の箇所のみ修正してみました。
----------------------------------------------------------------------
【HTML側】
----------------------------------------------------------------------
<div id="main-line"></div>を削除。
----------------------------------------------------------------------
【CSS側】
----------------------------------------------------------------------
#main-lineで引いていたline_rht.gifによるラインを、#main-area-ctsの指定に含め、更にfloatとpadhingを変更。

#main-area-cts {
float: right;
margin: 0;
padding-right: 1px;
width: 557px;
padding-bottom: 30px;
background: url(../img/share/line_rht.gif) right top repeat-y #266e4e;
}
----------------------------------------------------------------------
#main-area-ctsのfloatをrightに変更したのでpadding-leftは不要となります。そして、backgroundに右端に1pxの画像によるラインを垂直方向にレンダリングさせる指定を含めます。それに伴い、そのラインを表示する為の余白が#main-area-ctsの右端1pxに必要となってきますので、その分をpadding-right: 1px;で追加してあります。

これで少なくともIE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPでの表示結果は全て同じになり、ヘッダー、メイン、フッターのエリアそれぞれに左から750px目に1pxのラインがずれることなく繋がってレンダリングされています。

いかがでしょうか？

お礼

はい、途中から標準モードにしました。

別質問ではお世話になりました。
こちらでもありがとうございます。

早速やってみました！
確かに1pxのラインがレンダリングされてます！！
ありがとうございます！！m(_ _)m

ただ、幅750pxでないといけないのに、まだ753か754pxあります。
それと、ソースには新たに下段に要素が幅750px、縦70pxで入りました。
デザイン上必要なものです。
なので、この縦70pxの部分には1pxラインが出ないのです。
この1pxラインは、縦が2pxあります。1×1の透明部位と、その下に
1×1のグレーの部位でできています。
なので、今でさえこの1pxのライン部分は３つの行に分かれているのに、
また追加されて合計４つの行に分かれてしまうと、透明で終わった行の次の行は透明からスタートするので、この切れ目が、
本来、透明・グレー・透明・グレー～～～
とならなければならないのに、
透明・透明・グレー・透明～～～
というようにずれてきてしまいます。
こうならないようにしたいのですが・・・・

一番いいのは、コンテンツエリアとそのすぐ右からはじまる余白部分との仕切り線であるこの縦1pxの画像ラインは、行を分割することなくできたらいいのですが、行ごとに右側の余白のBGカラーも色が違うため、できなかったのです。

難しい内容で申し訳ないです・・・

回答No.3

leap_day

こんにちは

前回は隙間をなくすということでしたのでmarginバグについては記述していませんでしたね（＞＜）
IEのみfloatでmarginを使用するとmarginが倍になるバグがあります
#1様の言うpaddingのバグとはpadding分widthが増すことです
<div style="width:100px;"></div>でpsdding:10px;を指定すると<div>全体のwidthは120pxになるというものです

<ul>にはデフォルトでmargin,paddingが設定されています
そのためwidthがoverflowしているのでは?

あとtop,leftはpositionを使用したときのプロパティになりますので機能していません

それからfloatを使用したときはできれば区切りでfloat解除しておいた方がいいと思います

<style type="text/css"><!--
body {
margin: 0 auto;
background: #5ca786;
font-family: "Osaka";
font-size: 12px;
letter-spacing: 1px;
line-height: 150%;
color: #333333;
}
img {
vertical-align: bottom;
}

#wrapper {
width: 100%;
height: 100%;
background: #333333;/*Total BG Color*/
text-align: left;
}
#hdr-all {
margin: 0px;
width: 100%;
height: 112px;
background: #a2d8c0;
}
#hdr-area {
margin: 0px;
width: 750px;
height: 112px;
background: url(../img/share/bg_hdr.jpg) no-repeat;
float: left;
}
#hdr-vi {
float:left;
}
#hdr-line {
margin: 0px;
width: 1px;
height: 112px;
background: url(../img/share/line_rht.gif);
float: right;
}
#main-all {
margin: 0px;
width: 100%;
background: #5ca786;
}
#main-area {
margin: 0px;
padding-left:5px;
width: 745px;
background: #266e4e;
float: left;
overflow: auto;
}
#main-line {
margin: 0px;
width: 1px;
background: url(../img/share/line_rht.gif) repeat-y;
float: left;
}
#nv-global {
margin: 0px;
width: 177px;
padding-bottom: 30px;
background: #7bb395;
float: left;
}
#nv-global ul {
margin:0px;
padding:0px;
}
#nv-global li{
}
#main-area-cts {
margin: 0px;
padding-left:5px;
width: 557px;
padding-bottom: 30px;
background: #266e4e;
float: left;
}
#ftr-all {
margin: 0px;
width: 100%;
height: 150px;
background: #FFFFFF;
}
#ftr-area {
margin: 0px;
width: 750px;
background: #FFFFFF;
}
#ftr-area1 {
width: 749px;
height: 150px;
float: left;
}
#ftr-line {
margin: 0px;
width: 1px;
height: 150px;
background: url(../img/share/line_rht.gif) repeat-y;
float: left;
}
--></style>

<div id="wrapper">
<div id="hdr-all">
<div id="hdr-area">
<div id="hdr-vi">
<h1><img src="../img/share/hdr_vi.gif" alt="サイト名" /></h1>
ヘッダーエリア
</div>
<div id="hdr-line"></div>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-all">
<div id="main-area">
<div id="nv-global">
<ul>
<li><a href="index.html"><img src="../img/share/nv_lft01.gif" alt="ホーム" width="177" height="55" id="Image1" /></a></li>
<li><a href="../corp/index.html"><img src="../img/share/nv_lft10.gif" alt="会社情報" width="177" height="55" id="Image10" /></a></li>
</ul>
</div>
<div id="main-area-cts">
<table width="557" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../img/share/cts_frm_top.gif" alt="" width="557" height="21" /></td>
</tr>
<tr>
<td width="21" background="../img/share/cts_frm_lft.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td>
<td width="515" height="500" valign="top" bgcolor="#F6F6F6">コンテンツエリア</td>
<td background="../img/share/cts_frm_rht.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td>
</tr>
<tr>
<td colspan="3"><img src="../img/share/cts_frm_btm.gif" alt="" width="557" height="21" /></td>
</tr>
</table>
</div>
<div id="main-line"></div>
</div>
<div style="clear:both;"></div>
<div id="ftr-all">
<div id="ftr-area">
<div id="ftr-area1">フッターエリア</div>
<div id="ftr-line"></div>
<div style="clear:both;"></div>
</div>
</div>
</div>

お礼

他の箇所まで指南頂いてありがたいです。

> <ul>にはデフォルトでmargin,paddingが設定されています
> そのためwidthがoverflowしているのでは?

教えどおり、リストのCSSを設定したのですがダメでした・・・・

> あとtop,leftはpositionを使用したときのプロパティになりますので
> 機能していません

> それからfloatを使用したときはできれば区切りでfloat解除して
> おいた方がいいと思います

なるほど、了解です！

補足

書いていただいたソースを見ながら自分のソースと違うところを見つけて
修正していきましたが、どうしても意図にならない箇所が複数あり続けます。

●中段(main)の横幅が750pxのところが753か754pxになって右にはみ出てしまう。
●中段(main)の左から750px目に幅1pxで表示させる縦100%の画像ラインが繰り返してくれない

というところがどうしても直りませんでした。
ソースのどこが変わったところなのかをひとつひとつ見つけていったのですが・・・

回答No.2

noname#66720

背景色を背景画像にするとかでは都合が悪いですか？

お礼

はい、デザインは既に動かせない時期になっております
ありがとうございます

回答No.1

noname#66720

IE6では後方互換モードでfloatを指定した要素の左マージンを指定値の2倍とってしまうバグがあります。
指定がなかったので後方互換モードだと思うのですが・・・(違っていたらすみません。以下それを前程として書いていきます)

余白を取るときに、marginではなくpaddingを使われると解決が早いかもしれません。
その場合もIEのバグがあるので、widthやborderを指定したものには、 paddingを指定しないようにしてください。

例：横幅300pxのボックス1の中に、その子要素であるボックス2が上下左右に5pxの余白を取る場合

■ HTML
<div id="box1">
<div id="box2"></div>
</div>

■CSS
#box1 {
width:300px;
}

#box2 {
padding:5px 5px 5px 5px;
}

IEのバグ等は参考URLで調べることができます。

参考URL：

http://cssbug.at.infoseek.co.jp/

お礼

ありがとうございます。早速試してみました。

おっしゃるとおり後方互換モードでした。標準モードに変更して
marginをpaddingにしてみました。

が、ダメでした・・・
ご覧のとおり、左の要素はGlobalNavigation用のリストですが、
このリストは画像ボタンで、「背景色」が設定されているんです。
この背景色は画像ボタンと同じwidth:177pxをもち、一番最後尾の
画像ボタンが終わったあと30px背景を出すようにしています。
つまり、paddingにすると、この背景色ごとpaddingされてしまうので
左側5px分、背景色が伸びてしまい画像ボタンの「左横」に、意図しない
背景色が5pxはみ出してきてしまいます。

ううぅ・・・どうすればいいものか・・・
ネットサーフネットサーフ・・・・