質問: htmlで、何故か左右のfloatの高さが揃わない 質問させていただきたいと思います。 画面の中央より下にある、divで囲んだ、idを「nav」、「main」として登録してある左右のフロートがあります。 現在、この両者の頭の部分が、「nav」の方が、少し上になっています。 両者とも、margin-topは、40pxで、揃えてあります。 自分で、htmlの記述を見ても、今回は「 」も見つからず、何故、初期状態でピッタリと同じ高さにならないのかが疑問であります。 現在、dreamweavercs6を使用しています。html4.01 strictで書いていますが、詳しい方がいましたら、よろしくお願いします。
回答: 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にするときは、そのまま -----> ----> -----> --------> にすればよいだけです。 ★下記サンプルは、リキッドなのでスマホも幅広ディスプレイも関係なく利用できるはずです。ウィンドウ幅を変えてみてください。 ★印刷は、率直に印刷されるはず ★タブは_に置換してあるので戻すこと!!! ★another html-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )にてチェック済み サンプル タイトル ==== このページでは・・・・ 本文 ### 見出し ・・・ ### 見出し ・・・ ### 目次 1. リンク 2. リンク 3. リンク 文書情報 first published 2012-08-10 last modified 2012-08-10 12:00:00 (jst) © oruka1951 2012 - 2016 all rights reserved mailto:*****