- ベストアンサー
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がピッタリ過ぎるのが原因かなとも思うのですが。。 どなたかご意見をお聞かせ下さい。 よろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
恐らくは、「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)
こんにちは。 とりあえずソースを書いてみました。 <?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;、 を設定しなければなりません。
- sunawachi2
- ベストアンサー率56% (29/51)
>>.rightColumnはleftのmarginを180pxに設定しています。(floatClear済み) なぜマージン180pxつけるのかわかりません。 マージン180pxをつけると、600+180＝780pxになります。 メイン部分の幅を960pxにしたいのですか？
floatとマージンを指定している要素にdisplay:inline;を指定してみてください。
- readordie
- ベストアンサー率57% (66/115)
.rightColumn ではfloatをクリアせずに、float:right にして .footer で clear: both とすればどうでしょう。
- yambejp
- ベストアンサー率51% (3827/7415)
例文がないのでなんともいえませんねぇ さらっと書いた範囲ではとくに問題があるとも思えませんが・・・ >カラム落ち？ そもそもカラム落ちとはどういう状態を指しているのでしょうか？ うまく伝わってきません
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
