- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：marginが効いてくれません。）
marginが効いてくれません
このQ&Aのポイント
- 下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。
- #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。
- よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 >#contentsには背景画像を持ってきたい これを忘れてました。 以下も追加しておいてください。 #contents:after { content:""; display:block; clear:left; } 参考 http://www.geocities.jp/multi_column/float/05.html
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
回答No.1
float+clearが絡んだ時のマージンの仕様は結構複雑なので詳細はhttp://www.geocities.jp/multi_column/float/06.html こちらを読んで頂くとして、対処としては #contentsの下マージンを0にし、 #sidenavi、#mainの下マージンを10pxにします。 #contents { ・・・ margin-bottom:0; /*追加*/ } #contents #sidenavi { ・・・ margin-bottom:10px; /*追加*/ } #contents #main { ・・・ margin-bottom:10px; /*追加*/ }
お礼
補足でFirefoxでOKとお伝えしましたが、 sidenaviとmainのbottomにmarginはとれたのですが、contentsの中にとれているようなのです。 contentsの外にmarginをとりたいのですが、可能でしょうか。
補足
steel_grayさん、いつもありがとうございます。 下記のように変更しましたが、FirefoxでOKになりました。 ありがとうございます。 質問の仕方が不足で申し訳なかったのですが、今度はIE6で見ると 逆に下のmarginがつまってしまいました。 同じように見えるようにしたいブラウザはIE6とFirefoxです。 たびたびすみませんが、よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; height: 120px; width: 800px; } #contents { padding: 0px; margin:10px; /*ここはこのままでいいのでしょうか？*/ width: 780px; /*幅変更*/ background-color: #00CC00; margin-bottom:0px; /*追加*/ } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; margin-bottom:10px; /*追加*/ } #contents #main { background: #FFFFCC; width: 580px; float: right; margin-bottom:10px; /*追加*/ margin-left: 20px; /*追加*/ } #contents:after { content:""; display:block; clear:left; } #footer { background: #99CCFF; height: 80px; width: 100%; clear: both; }