カラーミーショップで特に無料のテンプレートをカスタマイズする際、HTMLとスタイルシートを直接入力していかなくてはなりませんが、特に初心者の場合失敗しやすい点があります。
こちらでは最も多いと思われる「カラム落ち」について考えてみたいと思います。
特に多いのが
が意図した表示なのですが･･･
このようにおかしなことになったことのある人はかなり多いのではないかと思われます。
このような場合、大抵はスタイルシート側の「float」指定がおかしくなっています。
基本的にfloatと言うのはサイズ指定に厳しく、指定したピクセルより1ピクセルでも多くなると問答無用でズレてくれます。
（例えば、floatのwidth指定が600pxだった場合、601pxを超えるとその時点でズレが生じます。）
また、float指定の際、スタイルシート記述に
float:left;
width:600px;
margin:0 10px;
と言ったような指定をしてしまうと、インターネットエクスプローラーは横幅を600pxとして判別しますが、FireFoxやsafariなどではmarginとpaddingでそれぞれ左右10pxずつスペースを作っているので580pxとして判別してしまいます。
よって、580pxを超える指定をしてしまうとインターネットエクスプローラーでは綺麗に表示されても、FireFoxやsafariではズレて表示されてしまうことがあるのです。出来ればfloat指定をする際は「width」だけを指定し、その下に別classを用意してmarginやpaddingを指定するようにすればこの問題を回避することができます（その際、width指定を入れないようにしましょう。widthはfloat指定の物を優先させます。）
例として、全体の横幅を800pxとし、サイドのコンテンツをwidth200px分のスペース、実際に左右に10pxずつ余白を作ることを想定し、180px以内で表示させます。メインページになる部分は800-200の600pxとし、こちらも左右10pxずつ余白を作る場合、下記のようなスタイルシート指定を用いればズレは回避できます。
（下記はあくまで参考例です。）
.side{
float:left;
width:200px;
}.side_content{
padding:0 10px;
text-align:left;
}.main{
float:left;
width:600px;
}.main_text{
padding:0 10px;
text-align:left;
}
最後に、floatさせている部分の指定が終了したら、HTML側に
<br style=”clear:both;” />
を入れ、処理を終了させましょう。このタグを入れておかないと、延々float処理が続いてしまいます。
