よく、レイアウトが崩れて原因がわからないなどと聞くが、私もレイアウトが崩れて困ることは、たびたびあります。

その時、みなさんどうしますか？

私は以下のようにしています。これを行うためにはそれなりの準備が必要です。

• Firebugインストールしていますか？
• IEなら、Firebug Lite, Companion.JS, DebugBar, IE8なら開発ツールを使う。
• CSSを見やすく表示してくれるもの、UTF-8でだ。

そして、まず

1. FireBugでその崩れたエレメントを選択してどのようなスタイルが適用されているか確認する。
   大抵、ここで原因がわかる。
   .hoge{}が効いて無くて、#hogehogeが効いている。
   じゃあ、#hogehoge .hogeで効かない？
2. それでもわからん。
   CSSをエディタで開き下からでも上からでもごっそり半分くらい消してみる。
   元に戻したり消す部分を減らしたりして、原因を探します。 また、複数のスタイルシートを読み込んでいるなら、ひとつずつ消してみる。これらは、実際にやろうと思うと大変そうに思えますが、簡単にできます。
   まず、レイアウトが崩れるページを開いて、ソースを表示します。そしてそのソースをすべてコピーし、hoge.htmlなどと作成したhtmlファイルに保存し、サーバー上または、ローカルサーバー上に置いてそれを開くのです。
   そして、それを編集してテストしてみるわけです。
   これは、たまに問い合わせがあった時でも、該当サイトをローカル上に保存し、同様にテストして使っています。

大抵これらでわかると思います。