- 締切済み
フッターの上へのマージンがあけれない
この度フルＣＳＳでサイトを作ってFirefoxでブラウザチェックしたのですが、フッターの余白がfirefoxであいていませんでした。 ＩＥ上では上へ２０ｐｘあいているのですが。。。 ページの簡単な内容は下記の通りになります。 Firefoxで「c」のフッターの上部にマージンを調整するにはどうしたらいいのでしょうか？ どなたか教えて頂けたら助かります。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #a { float: left; width: 200px; background: #0066FF; } #b { float: left; width: 200px; margin-left: 20px; background: #FF0066; } #c { clear: both; width: 500px; margin-top: 20px; background: #CCCCCC; } --> </style> </head> <body> <div id="a">左コンテンツ </div> <div id="b">右コンテンツ</div> <div id="c">フッター</div> </body> </html>
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- yuki-1234
- ベストアンサー率0% (0/0)
通りすがりの者です。 原因はおそらくブラウザの解釈の違いもありますが、 floatする物があれば、親の箱で入れ子で管理しましょう。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- .main { 親boxに高さを持たせます overflow: hidden; } #a { float: left; width: 200px; height: 200px; background: #0066FF; } #b { float: left; width: 200px; height: 200px; margin-left: 20px; background: #FF0066; } #c { ここでfloatより高い値で指定します。 clear: both; width: 500px; margin-top: 201px; background: #CCCCCC; } --> </style> </head> <body> <div class="main">親ボックスはfloatの高さを計算しませんのでoverflow hiddenで高さを持たします。 <div id="a">左コンテンツ</div> <div id="b">右コンテンツ</div> <div id="c">フッター</div>cのスタイルでmargin-topの値をfloatのheight以上の高さを指定するとbox cに隙間をとる事ができます。 clear:bothを指定すると、floatの回り込みを解除しますが、その時にクリアランス領域が発生します。 box cは <div class="main">の上を起点にmargin-topの値を計算します。 ieとfirefoxなどは、この辺の解釈が違うので、clearした要素にmargin-topを指定しないことをオススメします。 </div> </body> </html>
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 色々やり方はあると思いますが僕であれば・・・ #c { width: 500px; background: #CCCCCC; } float解除する為の<div>を使用して高さ確保するか・・・ <div id="a">左コンテンツ</div> <div id="b">右コンテンツ</div> <div style="clear:both;height:20px;"></div> <div id="c">フッター</div> コンテンツを内包する<div>を作ってそれのmarginを使用するかします <div style="margin-bottom:20px;"> <div id="a">左コンテンツ</div> <div id="b">右コンテンツ</div> <div style="clear:both;"></div> </div> <div id="c">フッター</div> ※<div style="clear:both;"></div>は内包<div>の高さを取得する為必須です
- nyanko_2003
- ベストアンサー率40% (241/600)
#c { clear: both; width: 500px; margin-top: 20px; background: #CCCCCC; } のidに、position指定して、topからの距離を指定したら？ #c { position: relative;/*ここにposition指定*/ clear: both; width: 500px; top: 20px;/*margin-topじゃなく、topに変更*/ background: #CCCCCC; } IEでも、FirefoxでもOperaでもフッターの上に空きます。
- ICHI-yan
- ベストアンサー率33% (45/134)
Operaはバージョンにclear:bothでも、くっついたり離れたりしてますね。 説明はできない、強引技です。最初の質問時のものに以下をプラスしてみて下さい。３大ブラウザは大丈夫だと思います。 body{width: 600px;}/*●500以上700以下に cが左に回り込む事の防止*/ #c {float:left;/*●クリアーしないで下さい(clear:both消す)。*/}
- tsunami02
- ベストアンサー率23% (16/68)
パディングでダメならマージンで、それでもダメならボーダーで。
- outbrave
- ベストアンサー率60% (231/380)
<div id="b">右コンテンツ</div> <div>ここに clear: both; を入れるとか。</div> <div id="c">フッター</div>
- Muller3
- ベストアンサー率81% (800/979)
上でだめなら#aか#bにmargin-bottomを指定してみるというのはどうでしょう。
お礼
ありがとうございます。 この方法ではダメだったみたいです。。。。
お礼
outbraveさんので おーこれでfirefox解決したー！ と思ったら今度はoperaがダメでした。。。(ＴｍＴ)