解決済み

CSSでボックスのheightが0になる

  • すぐに回答を!
  • 質問No.3376781
  • 閲覧数3900
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 35% (80/225)

http://css-happylife.com/

上のサイト(私のサイトではないです)で、

<div id="contentsInner">
<div id="main">
</div>
<div id="sub">
</div>
</div>

という部分があります。
CSSはだいたい下のような感じです。

#contentsInner {
margin:0pt auto;
position:relative;
width:910px;
}
#main {
float:left;
overflow:hidden;
width:500px;
}
#sub {
float:right;
margin-top:20px;
padding:8px 0pt 8px 10px;
width:390px;
}

Firebugで確認したところ、
#mainの大きさは500 x 1552
#subの大きさは390 x 1305
に対し、
#contentsInnerの大きさは910 x 0
と、高さが0になっています。
もちろん、#contentsInnnerに背景画像を設定しても
表示されることはありません。
ブラウザもheight=0と認識しているようです。

なぜ高さが0になってしまっているのでしょうか。
このバグ?の対策を教えてください。
よろしくお願いします。

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

  • 回答No.1

ベストアンサー率 66% (1052/1578)

http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q16
こちらにあるようにfloadしているボックスの高さは無視されますので、
バグでもなんでもなくて正しい挙動です。
(古いIEではこれを無視しないという誤った挙動をしていました。現在でも互換モードではその動作を継承します。)

http://www.geocities.jp/multi_column/float/05.html
http://www.fsiki.com/archive/css-doc/float.html
こちらが対処のヒントになると思います。
お礼コメント
xenotactic

お礼率 35% (80/225)

これはバグではなかったんですね、
参照サイトの指示通りに更新したら、高さを得ることができました。
昔からこの表示のされかたに戸惑っていたんです。
ありがとうございました。
投稿日時 - 2007-09-26 23:36:14
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ