IE6のwidth解釈のバグ対策
油断すると２カラムとか３カラムが他のブラウザでは崩れてます・・・。
スタイルシートレイアウトで表示が崩れないようにする
せっかくテーブルレイアウトから、スタイルシートレイアウトへ移行しても、 ＩＥ以外のブラウザ（MozillaやOperaやNetscape）で２カラム（２段組）や３カラム（３段組）が崩れていると ちょっと凹むと思います。
（・・・でも、使ってる人多くないし・・・ゴニョゴニョ）
・・・・・・・・気を取り直して進みます。
解決策はたったコレだけです。
「width」と「padding・border」を一緒に指定しない
つまり、レイアウトは、ざっくりとエリアの幅だけ決めて、 細かい調整はその中の「p」とかの要素でやれば大丈夫です。
スタイルシートレイアウトで表示が崩れる原因
問題は解決しちゃいましたが、一応、そうなる原因を解説します。
原因は、ＩＥ（の互換モード）が、「width」を「padding・border」を加えた大きさとして判断するからです。 本当は、「width」は内容領域の幅を意味するので、「padding・border」を加える前の幅なのです。
例えば、ＩＥでは、100pxのwidthを設定した時に、paddingを10px、borderを10pxと設定していたとすると、これらが含まれ、 このとき内容領域80pxになっています。
しかし、他のブラウザでは100pxのwidthを設定したということは、「paddingもborderも含まれない内容領域の幅が100px」という事を意味します。 つまり、paddingとborderの分の20pxだけ、ＩＥに比べて横幅が拡大されます。そして、スタイルシートレイアウトの段組みにその分の余裕がなければ はじき出され、レイアウトが崩れる原因になってしまうのです。
以上から、レイアウトでは、paddingもborderも指定しなければ（つまり、paddingもborderもゼロなら）、解釈の違いによる問題は起こらないので、そうするのがオススメです。
アフィリエイトの基礎知識をあなたに。
アフィリエイト （基礎編）
- アフィリエイトの流れ
- ホームページビルダーの準備 （初めは、あると重宝します。）
- サーバー選びと独自ドメインの取得
- テーマの決定 （最重要かつ、最難関。）
- 広告会社と契約
- アクセスアップ
アフィリエイト （参考コラム）
- ウィルス対策
- 費用対効果 （初期投資の判断材料に！）
- インターネットのマナー
- ホームページビルダー入門 （ビルダーを使うならどうぞ。）
- 表示速度
- 外見 vs 中身
アフィリエイト （Webデザイン）
- htmlの全体構造
- 構造的なタグ付け（h1～h6やｐの使い方）
- ページデザインの基本
- 文字サイズと文字数の指定
- 行間の指定 （だいぶ見やすくなります。）
- IE6のwidth解釈のバグ対策 （2カラムや3カラムの崩れ防止。）