- ベストアンサー
【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
赤い線はあなたの想像で描いているだけで、本当にborderを表示さ せると#Aの上の端にしか描かれないはずですね。なぜかというと、 #Aの中身は全部floatしているので、正しいCSSの解釈では#Aの高さ はゼロだから。#Aの下マージンはちゃんと存在していますが.Bと.C の下に隠れています。 というわけで、過去の質問をザッと眺めれば何度も出てくると思い ますが、clearfixなどのキーワードが有効です。
その他の回答 (2)
- qualheart
- ベストアンサー率41% (1451/3486)
補足ありがとうございます。 補足にあるDOCTYPE宣言で問題ありません。DOCTYPE宣言抜けが理由ではないみたいですね。 質問の内容ですが、<div id="A"></div>の下に設定されるべき10pxのマージンが適用されないと言うことでよいでしょうか？ 質問にあるソースでは<div id="A"></div>の下には何も配置していませんが、実際はそのあとにソースが続き、<div id="A"></div>の下に何かを表示しているってことで良いのでしょうか？ どのようにして<div id="A"></div>の下に設定されるべき10pxのマージンが適用されていないことを確認したのか教えていただけませんか？
お礼
＞qualheartさん なんとか解決しました！ 本当にありがとうございます。 ここまで導いてくださったおかげで 答えが見つかりました！ とても、助かりました。 早く質問すればよかった…。 また、わからなくなったら質問したいと思います！ ありがとうございます！！！！
補足
たびたび申し訳ございません。 図で説明するために画像をアップしました。 （といっても、見づらいですが…） 赤で囲まれているのが【id：A】となります。 青で囲まれているのが【id：B】となります。 黄緑で囲まれているのが【id：C】となります。 ＞質問の内容ですが、<div id="A"></div>の下に設定されるべき10pxのマージンが適用されないと言うことでよいでしょうか？ ＞質問にあるソースでは<div id="A"></div>の下には何も配置していませんが、実際はそのあとにソースが続き、<div id="A"></div>の下に何かを表示しているってことで良いのでしょうか？ 上記2つのご質問、そのとおりです。 下には、また<div><h3>…というように似たような構成が入ります。 （図で言うと、赤いラインの直下にあるオレンジ色のバーです。こちらが、<h3>のタグになります。） ＞どのようにして<div id="A"></div>の下に設定されるべき10pxのマージンが適用されていないことを確認したのか教えていただけませんか？ これは、Dream wearverのプレビューで確認しましたが、 赤で囲まれている【id：A】へマージンをつけても、 <div id="A">の上のほうだけにマージンの表示がされるだけでした。 そして、ブラウザで確認しても、まったく効いてない様子です。 <h3>タグに“margin:10px 0 0 0;”のように設定しているにもかかわらず こちらも＜firefox＞で、この【id：A】のみ効かない状態になっています。 私の見解では、【id：A】が、きちんと【id：B】【id：C】をくくっていないからではないかと思っておりますが、これは、コーディングの仕方が悪いのでしょうか…。 調べても、<div id="XX">のしたに、<div class="XX">と続けても 問題はないみたいなので、完全に詰まってしまっている状態です…。 長い説明になって申し訳ないのですが、もしお手すきであればお答えいただきたく存じます。 よろしくお願いいたします。
- qualheart
- ベストアンサー率41% (1451/3486)
基本的なことですが、HTMLの最初にDOCTYPE宣言は書いてますでしょうか？ ↓こういうやつです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTMLにもいろんな仕様がありまして、DOCTYPE宣言でどのDTDを使うか宣言してあげないと、ちゃんと表示できません。 これはブラウザとしてまっとうな仕様ですので（むしろ宣言してないのに勝手にDTDを選択してしまうIEが問題）、HTMLを作成する際には必ず先頭にDOCTYPE宣言を入れるようにしましょう。
補足
さっそくご回答ありがとうございます。 一応、下記のような宣言文をいれています。 もしかして、コレがいけないのでしょうか…。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
お礼
>grumpy_the_dwarfさん 解決しました～～～！！！！ clearfixというなまえは、よく聞いていたのですが、 こういうことだったのですね!!!!! 下記のページを見ていても、「？」となっていたのです。 （なぜ、今はわかったんだろう…） http://blog.d-spica.com/entry/070307clearfix.html もっと早く質問すればよかったです！ ありがとうございました！ うれしいです！ また何かあったときには、質問します。 本当にありがとうございます。