次のようなhtmlをIEで見たときとfirefoxで見たときで違います。
<div style="float:right;margin:5px">
右ブロッッッッッッック
</div>
<div style="text-align:center; width:100%;">
<div style="margin-left:auto;margin-right:auto;width:50%;">左ブロおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおック
</div></div>
firefoxでは、左ブロックが全体の50%の幅になりますが、IEでは、右ブロックの幅を差し引いた幅の40%になります。
また、画面を小さくすると、IEでは左ブロックが全部同じ幅になりますが、firefoxでは、右ブロックを回り込んでくれます。
(画像を添付してます。)
1.どちらの振る舞いが正しいのでしょうか?
2.firefoxの振る舞いを求めているのですが、どちらのブラウザーでもfirefoxのように表現するにはどうすればいいのでしょうか?
ただし固定幅には絶対したくありません。なるべくfloat:left;は使いたくありません。
1. Firefox です。
floatプロパティの値を left や right にしたボックスは「通常フロー」から切り離されて浮き上がります。( CSS2 では、そのためには明示的に幅を指定する必要があります、この点についてはどうしたのでしょうか?)
div[style="text-align:center; width:100%;"] は通常フローに属しており、浮いたボックスが存在しないように配置されます。その結果、このボックスと div[style="float:right;margin:5px"] は重なります。
しかし IE6 には以下の不具合があるとされています。
ちなみに IE7 では、div[style="text-align:center; width:100%;"] の上端は div[style="float:right;margin:5px"] の下端よりも下になりました。( 浮いたボックスの幅を 100px に指定して HTML 4.01 Strict で確認しました。)
2. 質問者が望むとおりにするのは不可能だと思いますが、div[style="text-align:center; width:100%;"] の width:100%; を取り除いた方が状況が少しマシになります。IE6 ではバグ054 が発生しなくなり、IE7 でも UA のページ表示領域に余裕がある状態では、先に述べたような配置にはならなくなります。しかし div[style="margin-left:auto;margin-right:auto;width:50%;"] の左右のマージンの具合を見ると、浮いたボックスを無視しきっていないようで、外側の DIV要素の左端から内側の DIV要素の左端までの距離と、内側の DIV要素の右側から浮動ボックスの左端までの距離が同じになるようです。( きちんと測ったわけではありませんが、目視ではそのように見えました。) さらに悪いことに、テキストの回り込みがうまくなされません。
もしくは、やはり回り込みが云々というのは諦めることになりますが、position を使ってみるのはいかがでしょうか。
1.IEのほうが正しい。
右ブロックの次にきたdivは左側に流し込まれるべき。
40%と書いてありますが、これは右ブロックの内容量によるはず。
FFは右ブロックが二つ目のdivに含まれてしまっている。
2.width:100%の大きいdivに右ブロックと左ブロックを含ませる。
と思ったが、やってみたらウィンドウ幅を縮小したら動きが違いました。
面倒なので、テーブルレイアウトでどうでしょう。
参考。
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#pr...
ご回答ありがとうございます。リンク先は後でゆっくり読んで見ます。
質問文中の40%という表記は50%の間違いです。
>FFは右ブロックが二つ目のdivに含まれてしまっている。
FFの動作は、2つ目のdivが、右ブロックを回り込んでいるのであって、含まれているのではないのでは?
私の求めている動作は、右ブロックの幅にかかわらず、左ブロックは全体の50%の幅で、もし右ブロックの幅が全体の50%を超えるようなら、左ブロックはそれを回り込んで欲しいのです。よろしくお願いします。
1. Firefox です。
floatプロパティの値を left や right にしたボックスは「通常フロー」から切り離されて浮き上がります。( CSS2 では、そのためには明示的に幅を指定する必要があります、この点についてはどうしたのでしょうか?)
div[style="text-align:center; width:100%;"] は通常フローに属しており、浮いたボックスが存在しないように配置されます。その結果、このボックスと div[style="float:right;margin:5px"] は重なります。
しかし IE6 には以下の不具合があるとされています。
ちなみに IE7 では、div[style="text-align:center; width:100%;"] の上端は div[style="float:right;margin:5px"] の下端よりも下になりました。( 浮いたボックスの幅を 100px に指定して HTML 4.01 Strict で確認しました。)
2. 質問者が望むとおりにするのは不可能だと思いますが、div[style="text-align:center; width:100%;"] の width:100%; を取り除いた方が状況が少しマシになります。IE6 ではバグ054 が発生しなくなり、IE7 でも UA のページ表示領域に余裕がある状態では、先に述べたような配置にはならなくなります。しかし div[style="margin-left:auto;margin-right:auto;width:50%;"] の左右のマージンの具合を見ると、浮いたボックスを無視しきっていないようで、外側の DIV要素の左端から内側の DIV要素の左端までの距離と、内側の DIV要素の右側から浮動ボックスの左端までの距離が同じになるようです。( きちんと測ったわけではありませんが、目視ではそのように見えました。) さらに悪いことに、テキストの回り込みがうまくなされません。
もしくは、やはり回り込みが云々というのは諦めることになりますが、position を使ってみるのはいかがでしょうか。
勉強になります。
ありがとうございました。下のコメントに書かせていただきます。
勉強になります。
ありがとうございました。下のコメントに書かせていただきます。