- ベストアンサー
CSSでボックスのheightが0になる
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になってしまっているのでしょうか。 このバグ？の対策を教えてください。 よろしくお願いします。
- xenotactic
- お礼率35% (80/225)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
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 こちらが対処のヒントになると思います。
関連するQ&A
- CSSでマージン設定がうまくいきません
以下の画像のように、div="main"のボックスとdiv="footer"のボックスの間に、 div="main"に対してmargin-bottomを設定したいのですが、 clearfixを使用してもうまくいきません。 次のコードを使用しました。 【HTML】 <div id="main" class="cf"> <div id=class"sub_01"> <p>aaaaaaa</p> </div> <div id=class"sub_02"> <p>bbbbbbb</p> </div> </div> <div id="footer"> <p>ccccccc</p> </div> 【CSS】 #main{ width: 850px; margin: 30px 0px; } .cf:befor, .cf:after{ content:""; display:block; overflow:hidden; } .cf:after{ clear:both; } .cf{ zoom:1; } .sub_01{ width: 500px; float: left; } .sub_02{ width: 350px; float: right; } #footer{ width: 850px; } --------ここまで-------- 以上のコードを書きましたが、最近clearfixのことを勉強したばかりで認識不足です。 親のmainの中のsub_01やsub_02に画像や文字が記入されるにつれて、 親であるmainの高さが変化し、mainに対してmargin-bottomを効かせる方法はないのでしょうか？ どうかご教授よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳ－heightの自動調節について
ＣＳＳを使いホームページ作成をしております。 一番上にロゴやフラッシュ、メニューを置き、その下の #mainという<div>の中に、#sideと#textの２つの<div>を横に並ばせ入れ込んでいるのですが、 #main全体の高さを、背景入りで、文字に合わせて自動調節したいと思っています。 しかし#mainのＣＳＳにheight:auto;を書き込んでも表示されません。 普通はheightは指定しなくても自動で調節されるものだと思っていたのですが、できなかったのでautoと書いたのですがダメでした。 heightをピクセルで指定すると表示されますが、文字を飛び越えて表示されてしまいます。 解る方どうかご回答お願い致します。 ＣＳＳについては初心者のため記述がおかしい部分もあるかもしれませんが、ＨＴＭＬとＣＳＳは以下の通りです。 【ＨＴＭＬ】 <div id="main"> <div id="side"> <p>左サイド</p> </div><!--side end--> <div id="text"> <p>右サイド</p> </div><!--text end--> </div><!--main end--> 【ＣＳＳ】 #main { width:800px; height:auto; background: #ffffff; margin-right: auto; margin-left: auto; margin-bottom:auto; clear: both; } #side { float:left; width:170px; margin-top:20px; } #text { float:right; width:600px; margin-top:20px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- CSSの応用がわかりません。
使用目的に合うCSSスタイルをダウンロードしてきました。 これはdivの高さを揃えられるcssです。 しかし、内容を理解していないので自分のホームページに適用できていません。 やりたいことは、col1が155px,col2が14px,col3が382px,col4が14px,col5が190pxにして使用したのですがこのcssを変更して使いたいのですがどのように変更すればよいでしょうか? /* Start of Column CSS */ #container5 { clear:left; float:left; width:100%; overflow:hidden; background:#eee; /* column 5 background colour */ } #container4 { clear:left; float:left; width:100%; position:relative; right:20%; background:#b2f0f9; /* column 4 background colour */ } #container3 { clear:left; float:left; width:100%; position:relative; right:20%; background:#89ffa2; /* column 3 background colour */ } #container2 { clear:left; float:left; width:100%; position:relative; right:20%; background:#ffa7a7; /* column 2 background colour */ } #container1 { float:left; width:100%; position:relative; right:20%; background:#fff689; /* column 1 background colour */ } #col1 { float:left; width:16%; position:relative; left:82%; overflow:hidden; } #col2 { float:left; width:16%; position:relative; left:84%; overflow:hidden; } #col3 { float:left; width:16%; position:relative; left:90%; overflow:hidden; } #col4 { float:left; width:16%; position:relative; left:94%; overflow:hidden; } #col5 { float:left; width:16%; position:relative; left:98%; overflow:hidden; } 以上がCSSです <body> <div id="container5"> <div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1"> <!-- col1 start --> <p>Each column is 20% percent wide with 2 percent padding on each side.</p> <!-- col1 end --> </div> <div id="col2"> <!-- col2 start --> <h2>No Images</h2> <!-- col2 end --> </div> <div id="col3"> <!-- col3 start --> <p>The HTML in this layout validates as XHTML 1.0 strict.</p> <!-- col3 end --> </div> <div id="col4"> <!-- col4 start --> <h2>This layout is FREE for anyone to use</h2> <!-- col4 end --> </div> <div id="col5"> <!-- col5 start --> <li>Opera 8 & 9</li> <!-- col5 end --> </div> </div> </div> </div> </div> </div> </body>
- 締切済み
- HTML
- Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSでfloatがうまくいきません。
CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？
- ベストアンサー
- HTML
- CSSで画面を構成しています。
CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか？ テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" /> <div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" /> <div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>
- ベストアンサー
- HTML
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
お礼
これはバグではなかったんですね、 参照サイトの指示通りに更新したら、高さを得ることができました。 昔からこの表示のされかたに戸惑っていたんです。 ありがとうございました。