- ベストアンサー
フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
position:relative; top:10px; で間隔をとるとfloatに悩まされないと思います。 IE5～8とfirefox3で確認しましたが無事に動いているようなので多分大丈夫です。
その他の回答 (1)
- KI401
- ベストアンサー率53% (44/82)
#containerのmargin-bottomを設定してはダメだろうか？ 以下どうでもよい気づき。 httpとequivの間がスペースになっているのはなぜ？ http-equivと、ハイフンが入って一つね。 それとサンプルソースを出してくれると回答側としても楽で助かるのだけれど、 できれば次からはstyleをhtmlに込めてくれ。そうしたらコピペで一発で確認できる。 分けるのも分けるので良いんだけど、<style></style>まで書くんならもう分ける意味がないと思う。
補足
＞httpとequivの間がスペースになっているのはなぜ？ ミスです。ご指摘ありがとうございます。 ＞次からはstyleをhtmlに込めてくれ。 普段はｃｓｓを外部ファイルにしているので、方法が分かりませんでした。勉強不足です。すみません。 ＞#containerのmargin-bottomを設定してはダメだろうか？ 更に#containerのmargin-bottomに１０ｐｘを指定してみたのですが、contentのほうが長くなった場合にIEで２０ｐｘの隙間ができてしまいます。 なぜなのか分からずモヤモヤしてしまいます。 例えばよく聞く「IE6には、フロートした要素のマージンが２倍になってしまうバグがあります。」のように、 IEとFFの解釈の違いの原因は何なのかの部分を教えていただけるとありがたいです。
補足
position:relative; top:10px; 指定してみました。 思うような結果が得られました。ありがとうございます。 今まで必要に迫られず、positionプロパティは未勉強だったので、これを機に勉強してみます。 しかしながら、先の現象がなぜなのか分からずモヤモヤしてしまいます。 例えばよく聞く「IE6には、フロートした要素のマージンが２倍になってしまうバグがあります。」のように、 IEとFFの解釈の違いの原因は何なのかの部分を教えていただけるとありがたいです。