CSSで左右にレイアウトすると、ブラウザによって表示が違う

左にナビゲーション、右にコンテンツ（幅はウインドに合わせる）をレイアウトしたいので、以下のようにCSSを定義しました。

ナビゲーション｛float:left；位置：相対的；幅：180px位；高さ：自動｝
コンテンツ｛float:right；位置：相対的；マージン左少々；幅：定義せず；高さ：自動｝

それと、HTMLの順序はナビゲーションが先（上）でコンテンツがその下です。

そうすると、IEでは意図したとおりに表示されるのですが、NNやOperaだとコンテンツがナビゲーションの下に来てしまいます。（正確にはコンテンツの幅が、その中の一番長い段落（又は画像）以下になったときにそうなる）

コンテンツの位置を「絶対的」に定義すれば問題ないのですが、出来ればそうせずにNNやOperaで意図どおりに表示する方法はありますか？

No.6 ベストアンサー 回答者： equation 回答日時： 2005/06/07 10:46

ネガティブマージンという手法があります。

実際私で成功していないので、うまく説明できないのですが、floatを使うときの常套手段みたいです。

http://adp.daa.jp/archives/000399.html

この回答へのお礼

皆さん、色々とアドバイスありがとうございます。
質問を締め切ってポイント発行すると言うシステムらしいですが、光明が見えるまでもう少しお待ち下さい。

さて、紹介いただいたHPを読むと、下記のような方法を推奨していますね。

「たとえば、メニューが左（200px）、本文が右（残り）で、メニューを先にfloat:leftさせる場合（HTMLのソースでメニュー部が先にある場合）は、メニューのwidthに200px、margin-rightに-200pxを指定する。そして、本文をfloat:leftし、widthを100%にする。」

この通りにやると、メニューと本文の間に文字通り200PXのスペースが出来てしまうので（書き間違いかな？）20PX位にしました。
そうすると、本文がメニューの下に回りこんでしまいそうですが、不思議な事にIEでは上手くいきますね。
しかし、他のブラウザだと「ちゃんと」下に回りこんでしまいます。

どうも、人の言うとおりにならないのは、私の設定が何処か別のところでおかしいのかな？

お礼日時：2005/06/07 21:32

No.7 回答者： equation 回答日時： 2005/06/07 23:02

正直自分で出来ていないものを人に勧めるのってどうなんだろう？と思いはしたのですが、投げてしまいました。

もう一つ解説ページをのっけときます。

参考URL：http://web.archive.org/web/20041010170530/http:/ …

この回答への補足

ネガティブマージン、成功しました！

コンテンツに左マージン（ポジティブ）を付ける方法との違いを示すサンプルページを作ってみました。ここから入ってください。

http://home.att.ne.jp/aqua/ada-t1626/WEB/2column …

しかし私見としては、まともなレイアウトのために、余計な<div>で入れ子状態にしなきゃいけないと言うのは納得いきませんね。

何故IEだけ普通に左マージンじゃダメなんでしょう？ブラウザのバグなんでしょうか。

補足日時：2005/06/09 00:24

この回答へのお礼

このHPも前回のモノと内容は同じだと思いますが、やっと私は自分の見落としに気付きました。

コンテンツ要素に「マイナス」の左マージン（この場合：-200px）を設定するんですね。ようやくネガティブマージンの意味が判りました。
そうすると当然メニューとコンテンツが重なってしまうので、コンテンツの中に子要素を作って、それの左マージンを200pxとする訳ですね。

何だか奇怪な感じですが、原理としては判りますので、今から試してみます。

お礼日時：2005/06/08 21:06

No.5 回答者： edams 回答日時： 2005/06/07 04:38

たぶん、似たような感じのものを見かけたので

英語ですがわかると思いますよ
http://glish.com/css/9.asp

参考URL：http://glish.com/css/

No.4 回答者： edams 回答日時： 2005/06/07 04:39

たぶん、似たような感じのものを見かけたので

英語ですがわかると思いますよ
http://glish.com/css/9.asp

参考URL：http://glish.com/css/

この回答へのお礼

このサイトをざっと見ただけですが、「2column...」の事例を見ると、本文やメニューの幅を％で指定する方法ですね。
これだと基本的にはOKなんですが、下の投降にある「メニュー幅の分だけ本文の左にマージンを開ける」方法と同じ症状が出ます。

であれば、この「メニュー幅の分だけ本文の左にマージンを開ける」が一番シンプルで的確な気がしますが、この方法でやっていて一つ気付いた事があります。

IEの場合、本文の中で横にメニューがある高さまでの段落と、それより下の段落では、下の段落の方がわずかに左に寄っています。
文章だと判りにくいかもしれませんが、ようはメニューのブロックが本文を少し右に押している感じです。
本文の左マージンはメニューの幅より広く取っているのにです。

そこで思ったのですが、私が問題にしている症状：「ウインドの幅を縮めて、本文の中の画像（又は指定した本文の幅）が入りきらなくなると、メニューの下に落ちる」の原因は、「メニューの下のエリアがわずかに広い」と言うIEの解釈（？）によって、収まりきらなくなった画像が「より広い」スペースに逃げるからでは無いでしょうか？

お礼日時：2005/06/07 22:13

No.3 回答者： noname#11353 回答日時： 2005/06/06 19:43

こんばんわ！

ナビゲーション｛float:left；位置：相対的；幅：180px位；高さ：自動｝
コンテンツ｛マージン左180px位；｝
ナビゲーションの幅の分だけ左マージンあけてみてください
私はこの方法でfirefox,opera,ieでちゃんと段組できています
コンテンツはfloatを指定せず、マージンだけ空ければ私はうまくいってますけど

この回答へのお礼

こんばんは。

下に書いたのですが、仰る方法だと万事OKと思いきや、IEで問題が発生するんですよ。

画像が入ってる場合だけじゃなく、コンテンツの幅を指定して、ウインドを縮めてその幅が入りきらなくなると下に落ちてしまうのです。
「それじゃ、左マージン180pxになってないだろ！」と突っ込みを入れたくなります。

極ありふれたレイアウトなのに、何故上手くいく方法が見つからないのでしょうね。

お礼日時：2005/06/06 21:26

No.2 回答者： kwgm 回答日時： 2005/06/05 17:20

floatは文字の回りこみが起きますので、

コンテンツが文字だけならばはfloatを使わない方がイイと思います。

この回答への補足

コンテンツは文字だけではなく、ページによっては大き目の画像もあります。
コンテンツにfloat：右を使うと、逆に文字の場合はOKなんですが、画像が右によってしまうのが難点ですね。
（ちなみに、左のナビにfloat：左を使わないと、コンテンツが最初からナビの下に入ってしまいませんか？）

そこで、コンテンツのfloatを止めて、その代わりに位置を絶対とも相対とも書かずに、”左マージン：ナビの幅”と指定すると上手くいきました。

しかし！そうすると今度はIEで新たな問題が発生しました。
コンテンツが画像の幅以下になると、ナビの下に行ってしまうのでした。（NNとオペラでは、ちゃんと横のスクロールバーが出てきます）”clear：right”と定義してもです。

何だか、問題がどんどん展開してしまってすみません。

補足日時：2005/06/05 21:51

この回答へのお礼

すみません。上の内容は回答の「補足」じゃなくて「お礼」として書くべきだったかも知れません。

お礼日時：2005/06/05 21:59

No.1 回答者： lio1284632 回答日時： 2005/06/05 16:41

回答ではないかもしれませんが、

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
.
.
.
.
</table>

で代用するのはどうでしょうか？
tableとdivを使うとかなりのレイアウトはできます
tableをレイアウトに利用するのはホントはよろしくないようですが(;＾∀＾)

この回答へのお礼

早速ご回答ありがとうございます。

ただ、tableは本当の表以外には使わない事にしましたので（＾＾；

お礼日時：2005/06/05 21:21