• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：cssのclear:both;を利用した場合の余白が・・・）

CSSのclear:both;を利用した場合の余白が...

このQ&Aのポイント
  • XHTML+CSSでサイトを作る際に、「clear:both;」を使用するとFirefoxでは上に、IEでは下に余分な余白が発生してしまいます。また、「clear:both;」を使用しない場合はカラム落ちが発生してしまいます。
  • 44行目のdivに「clear:both;」を使用しないとカラム落ちが発生し、使用すると余分な余白が発生します。
  • 問題の回避方法や間違いがあれば、ご指摘いただけると幸いです。
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

Firefoxで見ましたが、#topmenu-imgの上に余白があるんじゃなく て、#headerの下に#sitelogoのマージンがはみ出しています。CSS の P {margin : 0 0 1em 0;}の部分ですね。これは#sitelogoのス タイルで書いてやればオッケー。 で、美しくないDIV#clearですが、上記で一応「これがなくても #sitemenuが#sitelogoに引っかからず#containerの左端まで戻る」 状態になるので削除できます。でも、理屈からいえばこれは元々、 #sitemenuのスタイルにclear:both;を追加しとけばよかったんじゃ ないですかね。

CyberDenx2
質問者

お礼

ご回答有難うございます。 P {margin : 0 0 1em 0;}を指定していたのをすっかり忘れていました。 本当にありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • clear: bothの事で質問です。

    XHTML+CSSを勉強してる初心者ですが。 この場を借りて質問させてもらいます。 判らない事は (1) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div> <br style="clear: both;" /> (2) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div> <div style="clear: both;"></div> (1)と(2)では、 (1)は<br style="clear: both;" />と記入してますが (2)は<div style="clear: both;"></div>と記入してます。 この(1)と(2)は同じなのでしょうか？ それと使うとするならどちらのほうが有効的なのでしようか？ 教えていただければ光栄です。

    • 締切済み
    • CSS
  • ブラウザ上部に余白があります。

    近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>

  • safariで見るとページ上部に余白ができてしまう

    以下のhtmlとcssをChromeで見るとページ（サイト）上部に余白がないのですが、Safariで見ると余白ができてしまいます。どうやったら上部（と下部）の余白がどのブラウザでも表示されないようになりますでしょうか？初歩的な質問で申し訳ありませんがネットで検索してもわからなかったので、宜しくお願いいたします。 [html] <?xml version="1.0" encoding="UTF-8"?> <!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-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> <title></title> </head> <body> <div id="wrap"> <div id="inner"> <div id="header"> <img src="image_basic/logo.png" width="450" height="140" alt="veggietimeslogo" /> <img src="image_basic/slide.jpg" width="920" height="450" alt="slide2" /> </div><!-- /header --> <div id="mainwrap"> <div id="firstwrap"> <p>ここは一段目<br />ここは一段目<br />ここは一段目</p> </div><!-- /firstwrap --> <div id="middlewrap"> <p>ここは二段目<br />ここは二段目<br />ここは二段目</p> </div><!-- /middlewrap --> <div class="clear"><hr /> </div><!-- /clear --> </div><!-- /mainwrap --> <div id="sidewrap"> <p>ここはサイドバー<br />ここはサイドバー<br />ここはサイドバー</p> </div><!-- /sidewrap --> <div class="clear"><hr /> </div><!-- /clear --> <div id="footer"> </div><!-- /footer --> </div><!-- /inner --> </div><!-- /wrap --> </body> </html> [css] @charset "UTF-8"; /* CSS Document */ body{ background-color:#000000; text-align:center; margin:0;} #wrap{ background-color:#ffffff; margin:0 auto; width:960px; text-align:left;} #inner{ margin:0 20px;} #mainwrap{ float:left; width:610px;} #firstwrap{ float:left; width:300px;} #middlewrap{ float:right; width:290px;} #sidewrap{ float:right; width:290px;} .clear{ clear:both;} .clear hr{ display:none;} p { font-family:Tahoma, Geneva, sans-serif}

  • CSSレイアウトについて

    cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～

    • ベストアンサー
    • CSS
  • CSSで画像の横に余計な余白が・・・

    質問させて下さい。 以下のようなソースを書いた時のことです。 HTML部分------------------------------- <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> CSS部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、IEだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。

  • cssでの要素間の余白について。

    ホームページを作成しており、画像の下にdivをくっつけて、配置したいのですが、どうやっても、余白が出来てしまいます。styleでdiv要素にmargin-bottom:0、h2にmargin-top:0と記述しても、余白が出来てしまい、困っています。 さらにdiv containerの大きさについても、styleでwidth,heightで、大きさを指定しているのですが、横に画面一杯に広がってしまい、大きさ指定が反映されません。 初歩的な質問かもしれませんが、どこに問題がありますでしょうか？ ご教授お願いいたします。 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxxxxxxxxx</title> <style type="text/css"> body {background-color:#f5f5f5} div#container {width="800" height="40";background-color:#fff4d8} h1 {color:#330000;font-family:Geogia,Times New Roman,sans-selif} h2 {color:#330000;font-family:Geogia,Times New Roman,sans-selif;margin-top:0} </style> </head> <body> <div id="content"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" </h1> </div> <div id="container"> <h2> xxxxxxxx </h2> </div> </body> </html>

    • ベストアンサー
    • CSS
  • CSS Validatorでエラーの出ないclearfixハックとは

    W3CのCSS ValidatorでCSSをチェックしていますが、 フロートをクリアするための記述に問題があり、 正当なCSSと判断されません。 Validatorでエラーの出ないclearfixハックをご存知の方、 アドバイスをお願い致します。 関係あるかわかりませんが、一応書いておくと htmlの記述は「XHTML 1.0 Strict」で行っております。 以下、エラーが出ているclearfixの記述です。 /*------Floatのclearfix*/ #header:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } #header{ display:inline-block; } /*clearfix　Win版IE7・Mac版IE5対策*/ *html #header{ height:1%; } #header{ display:block; } Validatorが問題としている箇所は、下記の部分です。 *html #header{ height:1%; } 現在、悩みすぎて泥沼状態です。 どうも他の対策を思いつく余裕がなくなってきました。 申し訳ありませんが、皆様のお力をお借りしたく、 投稿させて頂きました。 なお、clear:both;の場合、完全にクリアされないことが あり、あまり使いたくない状況です。 何か良い対策方法があれば、アドバイスをお願い致します。

    • ベストアンサー
    • HTML
  • CSSテキストの回りこみ解除について

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> CSSでサイトをつくっています。 写真の右にテキストを回り込ませるのにfoat:leftをimgに指定しているのですが、 <div style="clear: both;"> <br style="clear: both;"> で解除すると、Firefoxで下に200pxくらいの余白ができてしまいます。（IEは問題ありません） そこでbothをallに変えると、Firefoxでもきちんと表示されるのですが、allはHTML 4.01は非推奨とのこと。 テキストの回りこみはどのようにすればうまく行くのでしょうか？

    • ベストアンサー
    • HTML
  • CSSでの質問です

    初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？

  • DreamWeaverでテーブルをCSSにした場合にずれます。

    DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する