ベストアンサー

HTMLで、何故か左右のfloatの高さが揃わない

2013/02/14 13:02

質問させていただきたいと思います。画面の中央より下にある、divで囲んだ、idを「nav」、「main」として登録してある左右のフロートがあります。現在、この両者の頭の部分が、「nav」の方が、少し上になっています。両者とも、margin-topは、40pxで、揃えてあります。自分で、HTMLの記述を見ても、今回は「 」も見つからず、何故、初期状態でピッタリと同じ高さにならないのかが疑問であります。現在、dreamweaverCS6を使用しています。HTML4.01 Strictで書いていますが、詳しい方がいましたら、よろしくお願いします。

thanksv
お礼率97% (689/704)

ホームページ作成ソフト
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/02/14 16:17 回答No.2

CSSのfloatで、左右が一行目で水平にならない( http://okwave.jp/qa/q7941844.html ) CSSで左右のfloatを固定化する方法( http://okwave.jp/qa/q7943557.html ) HTMLで、何故か左右のfloatの高さが揃わない( http://okwave.jp/qa/q7944740.html ) わ含めて、ごく簡単なサンプルを示しておきます。 1) HTMLは、ひたすら文書構造だけをできるだけ詳しく適切にマークアップすることだけ考えます。　デザインを先に考えたらダメです。初心者がもっともおちいりやすい失敗です。　デザインを想定されているとしても、それはあくまで、　　★その文書構造を表現(プレゼンテーション)するのに、そのデザインがよい★ 　ということなのですよ。 2) その上でスタイルシートでデザインして行きます。　HTMLの文書構造にしたがってデザインしていくことになりますし、将来デザインをまったく変更することも簡単にできます。下記サンプルで /* ★ */から/* ★ */までを、下の物に書き換えればナビゲーションの位置を変えられますね。 div.section div.section,div.section h2{margin:0;min-width:0;width:auto;} div.section{padding-top:44px;} div.section div.section{padding:0;} div.section div.nav h3{display:none;} div.section div.nav{height:44px;position:absolute;top:0;text-align:center;line-height:40px;width:100%;} div.section div.nav ol,div.section div.nav ol li{list-style:none;margin:0;padding:0;} div.section div.nav ol li{display:inline-block;width:20%;border:2px solid yellow;} 3) 今から十年後にあなたが見ても、いえ、誰が見てもHTMLのどこに何が書かれているかが一目瞭然でしょう。スタイルシートも分かりやすいはず。　HTML5にするときは、そのまま <div class="header"></div>-----><header></header> <div class="section"></div>----><section></section> <div class="footer"></div>-----><footer></footer> <div class="nav"></div>--------><nav></nav> にすればよいだけです。 ★下記サンプルは、リキッドなのでスマホも幅広ディスプレイも関係なく利用できるはずです。ウィンドウ幅を変えてみてください。 ★印刷は、率直に印刷されるはず ★タブは＿に置換してあるので戻すこと!!! ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )にてチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css" media="screen">  </style> </head> <body> <div class="header"> <h1>タイトル</h1> <p>このページでは・・・・</p> </div> <div class="section"> <h2>本文</h2> <div class="section"> <h3>見出し</h3> <p>・・・</p> </div> <div class="section"> <h3>見出し</h3> <p>・・・</p> </div> <div class="nav"> <h3>目次</h3> <ol> <li>リンク</li> <li>リンク</li> <li>リンク</li> </ol> </div> </div> <div class="footer"> <h2>文書情報</h2> <dl class="documentHistry"> <dt id="FIRST-PUBLISHED">First Published</dt> <dd>2012-08-10</dd> <dt id="LAST-MODIFIED">Last Modified</dt> <dd>2012-08-10 12:00:00 (JST)</dd> </dl> <address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> </div> </body> </html>

質問者

お礼 2013/02/14 18:08

ご回答、ありがとうございます。大変参考になりました。

質問者

補足 2013/02/14 18:07

いつも、詳しい解説をありがとうございます。この質問は、解決できました。可能であれば、 http://oshiete.goo.ne.jp/qa/7945114.html について、ご存知でしたら、教えていただければ幸いです。

その他の回答 (1)

axuaxua
ベストアンサー率36% (82/223)

2013/02/14 15:08 回答No.1

Operaで直接編集した結果なので他にも要因があるかもしれません id="base"内のmain1個上に存在する<P>がスタイル指定されていません。ですのでデフォルトスタイルのp{margin-bottom:1em;}が適応されmainの高さが1em下にずれています解決方法としてはcssでp{margin:0;}を指定するか*{margin:0;}でmarginを消す必要があります