CSS指定によるレイアウト崩れの原因についてのチェック項目です。（標準準拠モードで表示する事を想定しています）
floatに関する指定について
以下はfloat指定の際の注意項目です。確認してみて下さい。
width指定をしていない。
すべてのブラウザで起こるわけではありませんが、Mac IE5ではfloat指定の際widthも指定しなければ回り込みが上手く反映されません。
widthを指定する事は、余白を設定する場合やリンク領域を要素全体に広げたい際にも重要になります。普段から記述する事をお勧めします
floatを指定した同方向にmarginを指定している。
サンプル
#sample{
float: left;
width: 180px;
margin-left: 20px;
}
IEではfloatと同方向にmarginを取ると、幅が2倍で表示されます。
widthの計算。
- 全体の幅を超えていないか
- 余白分差し引いているか
- border分差し引いているか
以下のCSS指定サンプルではレイアウトは崩れます
#wrapper{ width: 700px; }
#content{
width: 500px; /* この場合なら 489px */
float: left;
margin: 0 10px 0 0;
border-right: 1px solid #000;
}
#sidebar{
width: 200px;
float: right;
}
#footer{ clear: both; }
標準準拠モードと後方互換モードに関する部分です。詳細はCSSレイアウト崩れの原因についてで確認して下さい。
