NPO International TRI Network (Dr_Radialistのブログ)

SEO (Search Engine Optimization)とはWEBの検索ロボットがそのHome PageなりBlogなりを見つけ易くすると共に、検索ランキングを向上させるための、テクニックの総称です。
このSEOの中でも一番重要なのが、HTMLで書かれたページには、DOM (Document Object Model)に則って文章論理構造のみを記載し、見かけは、CSSに書き、しかも別ファイルにする、ということです。このようにすると、検索エンジンは、HTMLのタグを容易に認識し、その中からKey Wordを抽出し易くなり、検索ランキングが向上するのです。まあ、ここらは聞いた話なので、真相は不明です。
このDOMの中で重要なのが

<div></div>

タグです。以前は

<table><tr><td></td></tr></table>

タグを用いて段組みを実現するのが主流だったのですが、表として用いる場合は良いのですが、ブロックを横に並べたりする場合には、本来論理構造を表すべき

<div></div>

を用いて、そこにCSSを適用します。具体的には例えば

[/htnl]
というHTML文を書き、div1とdiv2が横並びするようにするためには、

#div1 {
  float:left;
  width: 49%;
  background-color: red;
}
#div2 {
  float:left;
  width: 49%;
  background-color:green;
}

というふうにするのです。ところが、ここに落とし穴があります。よくよく色々な解説ページを検索したところ、横並びブロックのCSSでの幅指定合計が100%になってはいけない、らしいのです。
実は、最初

#main_panel {
  width: 1000px;
}
#div1 {
  float:left;
  width:500px;
  background-color:red;
}
#div2 {
  float:left;
  width:500px;
  background-color:green;
}

という風に幅指定を絶対値指定いてみたところ、全く横並びにならないのです。それで、検索したところ、100%にしてはならず、98%以下にしなさい、という記述を見つけたのです。
それで、その通りにしたところ、見事に横並びになりました。
しかし、試しに

#main_panel {
  width: 1000px;
}
#div1 {
  float:left;
  width:50%;
  background-color:red;
}
#div2 {
  float:left;
  width:50%;
  background-color:green;
}

としたところ、今度はきちんと横並びになりました。やはり、最近のブラウザでは、改善しているようです。それでも、子のブロックに関しては、%による相対幅表示にせねばならないようです。
あー　随分と勉強しました。