html+cssのwebデザインについて教えてください。

次のような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人2回まで
  • 登録:2007/03/15 21:50:57
  • 終了:2007/03/17 13:29:38

ベストアンサー

id:Bill No.2

Bill閣下回答回数17ベストアンサー獲得回数32007/03/17 01:08:10

ポイント90pt

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 を使ってみるのはいかがでしょうか。

id:edatrash

勉強になります。

ありがとうございました。下のコメントに書かせていただきます。

2007/03/17 13:23:56

その他の回答(1件)

id:Yota No.1

Yota回答回数453ベストアンサー獲得回数282007/03/16 10:54:50

ポイント9pt

1.IEのほうが正しい。

右ブロックの次にきたdivは左側に流し込まれるべき。

40%と書いてありますが、これは右ブロックの内容量によるはず。

FFは右ブロックが二つ目のdivに含まれてしまっている。

2.width:100%の大きいdivに右ブロックと左ブロックを含ませる。

と思ったが、やってみたらウィンドウ幅を縮小したら動きが違いました。

面倒なので、テーブルレイアウトでどうでしょう。

参考。

http://www.y-adagio.com/public/standards/tr_css2/visuren.html#pr...

id:edatrash

ご回答ありがとうございます。リンク先は後でゆっくり読んで見ます。

質問文中の40%という表記は50%の間違いです。

>FFは右ブロックが二つ目のdivに含まれてしまっている。

FFの動作は、2つ目のdivが、右ブロックを回り込んでいるのであって、含まれているのではないのでは?

私の求めている動作は、右ブロックの幅にかかわらず、左ブロックは全体の50%の幅で、もし右ブロックの幅が全体の50%を超えるようなら、左ブロックはそれを回り込んで欲しいのです。よろしくお願いします。

2007/03/16 12:03:19
id:Bill No.2

Bill閣下回答回数17ベストアンサー獲得回数32007/03/17 01:08:10ここでベストアンサー

ポイント90pt

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 を使ってみるのはいかがでしょうか。

id:edatrash

勉強になります。

ありがとうございました。下のコメントに書かせていただきます。

2007/03/17 13:23:56
  • id:Bill
    ごめんなさい、回答が早計でした。
    DIVを2重にしているのが文書構造テキに譲れないマーク付けではなかったら、こういうのはどうでしょうか?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ja">
    <meta http-equiv="content-style-type" content="text/css">
    <title>This is a sample</title>
    <style type="text/css"><!--
    #right {
    width: 300px;
    float:right;
    background: blue;
    margin: 5px;
    }
    #left {
    text-align: center;
    background: red;
    padding: 0 25%;
    }
    --></style>
    <div id="right">
    右ブロッッッッッッック
    </div>
    <div id="left">
    左ブロおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおック
    </div>
    </html>
  • id:edatrash
    なるほど。padding 0 25%がみそですね。
    ありがとうございました。感謝します。

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

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

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

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