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ベストアンサー
- 回答日時:
こちらにあるようにfloadしているボックスの高さは無視されますので、
バグでもなんでもなくて正しい挙動です。
(古いIEではこれを無視しないという誤った挙動をしていました。現在でも互換モードではその動作を継承します。)
http://www.geocities.jp/multi_column/float/05.html
http://www.fsiki.com/archive/css-doc/float.html
こちらが対処のヒントになると思います。
これはバグではなかったんですね、
参照サイトの指示通りに更新したら、高さを得ることができました。
昔からこの表示のされかたに戸惑っていたんです。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
Firefoxで見るとli要素レイアウ...
-
定義リストに下線をつけたいと...
-
CSSでボックスのheightが0になる
-
Flexslider2のカーセルスライダ...
-
投稿フォームの整列
-
Firefoxでheight:100%がきかない?
-
初心者html・CSS ウィンドウを...
-
画像の位置指定
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
表示倍率を変えるとレイアウト...
-
回り込みについて(間隔が空く)
-
FFにおけるDIVタグ間の隙間につ...
-
html初めてです、教えてください!
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
入力フォームとセレクトボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報