CSSのIE6とflaotとwidth:100%;について質問です。

divA{width:50%; float:left;} と divB{width:50%; float:right;} と指定して、divAとdivBを可変式でぴったり横に並べたいのですが、Win IE6とMac IE5.2では、横に並ばずに下に回り込んでしまうケースがあります。
IEでは、divのwidthが合計で100%になると回り込みが正常に動作しないケースがあると聞きました。
デザインの都合上、divAとBの合計は100%で作りたいと考えています。

不具合や解決法の詳細があるサイトを教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/12/24 12:38:07
  • 終了:--

回答(7件)

id:ke_ishi No.1

ke_ishi回答回数269ベストアンサー獲得回数02004/12/24 12:41:43

ポイント16pt

cssに以下の指定を追加してみては?

body{ margin: 0; }

id:Kurobuchi

ありがとうございます。

レイアウトの都合で、body{ margin: 20px;}が理想です。

body{ margin: 0;}も試してみました。一見問題なく表示されたのですが、ウィンドウサイズを動かすと回り込みができない現象がでています。(リキッドデザインで作っています)(横にちゃんと並ぶ時と下に送られてしまう場合があります)

ちなみにどちらのdivも48%の幅にすると全く問題ありません。でもぴったり並べたレイアウトを実現したいです。

2004/12/24 12:51:55
id:kilinji No.2

kilinji回答回数31ベストアンサー獲得回数02004/12/24 12:50:15

ポイント16pt

divAとdivBの外にその二つを統括するdivABが必要ですね。

もし統括するdivABをなしにするならば、

divBの「right」をはずして、「margin-left: 50%」でどうにかなる予感がします。

はずれであればポイント不要です。

id:Kurobuchi

ありがとうございます。

divABはすでに設定していまして、その幅は100%としています。

divABのさらに親要素に、divContentがあり、その幅はbodyの66%でfloat:left;としています。

残念ながらうまく動作しませんでした。

2004/12/24 12:58:42
id:KIROW No.3

KIROW回答回数38ベストアンサー獲得回数02004/12/24 14:18:09

ポイント16pt

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

ADP: IE6のwidth解釈バグ対処法

IEではmargin,paddingの解釈にバグがありますね

margin=0 にできないなら入れ子でもう一つ中にボックスを作ってそれでmargin指定するというのはどうでしょう

ちょっと煩雑になるかもですが・・・

http://easygoing.under.jp/bug/bug02.html

Public CSS - sorry,but not found.

id:Kurobuchi

ありがとうございます。

指定してみましたが残念ながらうまくいきませんでした。

やはり、両divボックスの合計幅が100%になると崩れてしまうのでしょうか?

2004/12/24 14:52:00
id:diabah_blue No.4

diabah_blue回答回数129ベストアンサー獲得回数12004/12/24 15:00:19

ポイント16pt

IE6を考慮する限り、100%には出来ないようです。

少なくともdivA,divBの両方を左寄せにすれば、「ぴったり」になります。ただし、少しだけ中心からずれてしまいますけど。

3番目のURLに妥協案のサンプルを置いてみました。

よろしければご覧下さい。

http://www.2-21.com/extra/css_tips001.html

iStudio 2|21: CSS スタイルシート雑技 No. 1 CSS で段組みレイアウトを作る

http://cubic9.com/test/hatena/float100/

はてな 1103859487 IE6とfloatとwidth:100%

id:Kurobuchi

ありがとうございます。

デモまで作成いただき感激しています。

後ほど幅49%のCSS HACKでチャレンジしてみます。

2004/12/27 16:10:39
id:amanoftaste No.5

amanoftaste回答回数42ベストアンサー獲得回数02004/12/25 14:51:15

ポイント16pt

合計幅を100%にすると崩れるのは、

border等のせいだと思います。

前見た本に同じことが書いてありました。

あと、divAをfloat:left;、divBをfloat:right;と、

指定する必要はありません。

両方ともfloat:left;でかまわないと思います。

id:Kurobuchi

ありがとうございます。

borderなどの設定を外してみて試してみたいと思います。

2004/12/27 16:11:21
id:sd9to No.6

sd9to回答回数16ベストアンサー獲得回数02004/12/27 13:42:26

ポイント15pt

スタイルシート

.divA{width:50%; float:left;}

.divB{{width:50%; float:left;}

.clearleft {clear:left;}

HTML

<div class=”divA”></div>

<div class=”divB”></div>

<br class=”clearleft”>

じゃだめでしょうか?。

URLにサンプルが乗っています。

id:Kurobuchi

ありがとうございます。

サンプルで作成いただいた段階ではうまく表現されていましたね。

作成中のサイトでも試してみます!

2004/12/27 16:14:21
id:Yuichirou No.7

Yuichirou回答回数112ベストアンサー獲得回数362004/12/27 14:10:08

ポイント15pt

そもそもfloatは「後ろに来る内容を回り込ませる」という機能なので、

仮にHTMLの記述がdiv.A→div.Bの順の場合、div.Bの方のCSS設定は「float: none;」にする必要があります。

また、IEでは回り込んだブロックのwidthの基準が「親ブロックの幅−floatを設定したブロックの幅」となるので、

結局「div.B{width:100%; float:none;}」とすればいいと思われます。

id:Kurobuchi

ありがとうございます。

試してみます。

-----

回答者のみなさんへ

CSS HackですべてのIE用合計幅を96%に、IE以外のブラウザには合計幅100%に設定して問題が解決できました。

IEにはぴったりレイアウトは難しかったのですが、これにて満足したいと思います。

ありがとうございました。

2004/12/27 19:24:17

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません