- ベストアンサー
CSSレイアウトについて
cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> なぜbackgroundを設定することにより解決したのかも全く意味不明なので 不明ですね。今までにその様なケースは聞いた事も経験した事もないです。 で、とりあえず質問者様の提供されたソースをそのままコピペした上で、 (a)"background: url();"を削除 (b)"display: inline;"を削除 という修正を加えてIE6上での表示結果を検証してみました。しかしその結果、(a)だけ/(b)だけ/(a)(b)両方、という3種類のどのパターンでも「右のカラムが落ち」てという現象は起こりませんでした。つまり、(a)や(b)によって現象が解消されたわけではないと思われます。 (a)(b)がない状態でもIE6上では一見問題なく表示されています。が、Firefox上ではいずれの状態でも「右のカラムが落ち」てという現象こそ起きていませんが、”いずれの状態でも”子要素#left/#center/#rightのコラム全てが親要素である#contentsからすっぽり落ちてしまっています。それぞれの要素に背景色やボーダーを一時的に入れて見ると一目瞭然です。 この上記の表示結果はFirefox上の方が正しいです。内包する子要素が全て「浮いて」しまっているので、親要素は高さを失ってしまうからです。この状態を解消させるには、親要素自体をフロートさせる（ただしこの方法は今回の様にコンテンツ全体が左寄せになっている場合のみ使えます）／clearfixを使う、など幾つか方法がありますが、floatによる3コラム組の詳細（IEでのバグに関する事も含めて）については下記がよくまとまっているので参考になるかと思います。 http://www.geocities.jp/multi_column/ で、話を原点に戻しますが、同じ環境上で「右のカラムが落ち」てという現象が見られないところを見ると、おそらく原因は#left/#center/#rightのスタイル自体にあるのではなく、更にその中の要素にあるのではないでしょうか。実はコラムの幅を超えてしまっている要素がある、とか…？ 今一度、#left/#center/#rightの中をサンプルの様にダミーテキストだけにして他の要素を全て削除して再度検証されてみてはいかがでしょう？それで今の現象が起こらないのであれば、「犯人」は確実にその他の部分にいる事になります。また、構造はこれ以上むやみにdivを入れ子にする必要はないでしょう。原因が特定できれば基本はこの構造のままでも充分解決できると思いますので。
その他の回答 (2)
- yumitsuki
- ベストアンサー率52% (167/321)
No.1様の補足をさせて頂きます。 IEのバグを回避する方法のひとつとして、カラム毎に<div>～</div>を入れ子にする方法があります。 外側の<div>～</div>でカラム幅を設定し、内側の<div>～</div>で内容を記載します。 ここで、外側の<div>～</div>ではmargin、border、paddingの全てを0px幅にしてしまうのがポイントです。 カラム間の隙間は、内側の<div>～</div>のpaddingで設定出来ます。 例： ～CSS部ここから～ #contents { width: 1000px; margin: 0px; border: none; padding: 0px; } #left-container { float: left; width: 200px; margin: 0px; border: none; padding: 0px; } #left-content { float: left; margin: 0px; border: none; padding: 任意px; } #center-container { float: left; width: 200px; margin: 0px; border: none; padding: 0px; } #center-content { float: left; margin: 0px; border: none; padding: 任意px; } #right-container { float: left; width: 200px; margin: 0px; border: none; padding: 0px; } #right-content { float: left; margin: 0px; border: none; padding: 任意px; } ～ここまでCSS部～ ～HTML部ここから～ <div id="contents"> <div id="left-container"> <div id="left-content"> レフト<br /> </div> </div> <div id="center-container"> <div id="center-content"> センター<br /> </div> </div> <div id="right-container"> <div id="right-content"> ライト<br /> </div> </div> </div> ～ここまでHTML部～
とりあえずdisplay:inline;に意味はないです。 #centerのmarginのせいでしょう。 ie6では互換モード時にfloatを指定した要素にfloatと同じ方向へのmarginを指定した場合にその指定された値の2倍のマージンをとってしまうバグがあります。 なので、#leftと#centerにそれぞれmargin-right:20px;としてやればカラム落ちしないと思います。 多分この方法でやればbackgroundも必要なくなるのではないかと。
お礼
お返事ありがとうございます。 参考リンクをもとに以下のソースでなんとか解決できました。 #left { float: left; width: 180px; text-align: left; } #center { float: left; width: 600px; margin-left: 20px;/*leftのみにmarginを設定*/ text-align: left; } #right { float: right;/*leftをrightに変更*/ width: 180px; text-align: left; } 骨組みを作っていた段階で他のcssが邪魔していることも考えがたく 質問時に表示したソースで私のパソコン上ではカラム落ちしていたので 謎だらけですがおかげ様で次に進めそうです^^ ie6の解釈は恐るべしですね・・・ｗ ＞また、構造はこれ以上むやみにdivを入れ子にする必要はないでしょう。 これにつきましては私も賛同します。方法のひとつとしてなので 否定するわけではありませんがスッキリしているほうが管理なども 楽なので^^; わかりやすくご指摘頂きましてありがとうございました！