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

解決済

質問者：thanksv
質問日時：2013/02/14 13:02
回答数：2件

質問させていただきたいと思います。

画面の中央より下にある、divで囲んだ、idを「nav」、「main」として登録してある左右のフロートがあります。
現在、この両者の頭の部分が、「nav」の方が、少し上になっています。
両者とも、margin-topは、40pxで、揃えてあります。

自分で、HTMLの記述を見ても、今回は「」も見つからず、何故、初期状態でピッタリと同じ高さにならないのかが疑問であります。

現在、dreamweaverCS6を使用しています。HTML4.01 Strictで書いていますが、詳しい方がいましたら、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/02/14 16:17

CSSのfloatで、左右が一行目で水平にならない(

http://oshiete.goo.ne.jp/qa/7941844.html )
CSSで左右のfloatを固定化する方法( http://oshiete.goo.ne.jp/qa/7943557.html )
HTMLで、何故か左右のfloatの高さが揃わない( http://oshiete.goo.ne.jp/qa/7944740.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>

この回答への補足

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

補足日時：2013/02/14 18:07

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/02/14 18:08

No.1

回答者： axuaxua
回答日時：2013/02/14 15:08

Operaで直接編集した結果なので他にも要因があるかもしれません

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