ども。今日もhtmlとcssを一日中書いていた自分です。

さてタイトルの件ですが、そもそもカラム落ちはどんな時に生じるでしょうか？

①ボックスのwidth要素の指定が正しくない（大きすぎる場合）

②ブラウザ間でのボックスのwidth要素の解釈の違い。

③ボックス内のテキストや画像が大きすぎて、 width要素が膨らんでしまう。

とまぁこんなところでしょうか。

①はまぁしょうがないので、長さを確認してみてください。

②ですが、こちらはMozillaとIEを例に取り上げます。

まずこのソース

<div style=”width:50px;height:50px;padding:10px;background-color:red”>
■
</div>

このボックスのはIEだと50px×50pxですが、Firefoxだと70px×70pxになります。
padding要素の解釈の違いですが、困った話です。borderも同様の動作がおこります。
paddingを使いたいときは、ボックスを入れ子にして使いましょう。
こんな感じ。

<div style=”width:50px;height:50px;background-color:red”>
<p style=”padding:10px;”>■</p>
</div>

書いてたら長くなってしまったので、続きは今度にします。