• ベストアンサー

IE6でカラム落ちしてしまう。

2カラムレイアウト？で以下のような構成にしました。 .header width:780px .leftColumn width:180x .rightColumn width:600px .footer width:780px .leftColumnと.rightColumnは.contenGroup(width:780px)で囲み、全体はouterGroup(width:780px)というdivで囲んでいます。 .leftColumnはleftにfloatさせており、.rightColumnはleftのmarginを180pxに設定しています。(floatClear済み) IE7 FireFox Opera Safari（各win/mac両方）とも想定通りに表示されるのですが、IE6でrightColumnがカラム落ち？していまいます。 XHTML1.0strictでxml宣言有りです。 全体にわたって、あまり詳しくありませんが、何か解決できる良い手段はないものでしょうか。 それとも、これから作るサイトなのだからIE6はもうどうでも良い・・　というのも有りなのでしょうか？ pxがピッタリ過ぎるのが原因かなとも思うのですが。。 どなたかご意見をお聞かせ下さい。 よろしくお願いします。

  • HTML
  • 回答数6
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • yumitsuki
  • ベストアンサー率52% (167/321)
回答No.3

恐らくは、「IE6でxml宣言すると互換モードになってしまう」というIE6のバグが原因かと思われます。 標準モードと互換モードとでは、widthの計算方法が違うため、標準モードのつもりで組んだ場合にカラム落ちが発生しやすいようです。 個人的には、 ・XHTML1.0 transitional ・xml宣言しない ・キャラクターセットはUTF ・divは2重入れ子にして、外側では、margin=0、border=none、padding=0として、内側でpaddingを設定 という応急処置で回避出来ております。 http://members.at.infoseek.co.jp/cssbug/detail/winie.html http://www.mycupoftea.cc/archives/2004/04/05/win6_xml_declaration.html 以上、ご参考になりましたら幸いです。

その他の回答 (5)

  • hetare560
  • ベストアンサー率66% (28/42)
回答No.6

こんにちは。 とりあえずソースを書いてみました。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> <style> * { margin:0; padding:0; } body { text-align:center; } #outerGroup { width:780px; margin:0 auto; } #header, #footer { width:100%; height:30px; background:#ccc; clear:left; } #contenGroup { width:100%; } #leftColumn { height:200px; width:180px; background:#fc9; float:left; } #rightColumn { height:200px; width:600px; background:#f9c; float:left; } </style> </head> <body> <div id="outerGroup"> <div id="header"> ヘッダー </div> <div id="contenGroup"> <div id="leftColumn"> 左コラム </div> <div id="rightColumn"> 右コラム </div> </div> <div id="footer"> フッター </div> </div> </body> </html> こういうことですか？ ＞.leftColumnはleftにfloatさせており、.rightColumnはleftのmarginを180pxに設定しています。(floatClear済み) このやり方でそろえる場合には.contenGroupにposition:relativeを設定し、 .leftColumnにfloat:left;width:180px;、 .rightColumnにposition:absolute;top:0;left:180px;width:600px;、 を設定しなければなりません。

回答No.5

>>.rightColumnはleftのmarginを180pxに設定しています。(floatClear済み) なぜマージン180pxつけるのかわかりません。 マージン180pxをつけると、600+180＝780pxになります。 メイン部分の幅を960pxにしたいのですか？

noname#66720
noname#66720
回答No.4

floatとマージンを指定している要素にdisplay:inline;を指定してみてください。

  • readordie
  • ベストアンサー率57% (66/115)
回答No.2

.rightColumn ではfloatをクリアせずに、float:right にして .footer で clear: both とすればどうでしょう。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

例文がないのでなんともいえませんねぇ さらっと書いた範囲ではとくに問題があるとも思えませんが・・・ >カラム落ち？ そもそもカラム落ちとはどういう状態を指しているのでしょうか？ うまく伝わってきません

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する