ブロックレベル要素のレイアウト崩れ
レイアウト崩れは、親要素にwidthが指定されていないブロックレベル要素やブロックレベル要素で、以下のようにwidth,margin-left:auto,margin-right:auto,overflowが揃うと発生する。
h1 { width:800px; height:12px; margin:0px auto; padding-top:3px; overflow:hidden; font-size:70%; line-height:130%; text-align:right; background:url(../img/bg_h1.jpg) no-repeat; }
回避方法
無駄なコーディングとなるが、div containerなど全体を囲む領域を設定して、親要素でwidthを設定する。
div#container { width:800px; margin:0 auto; text-align:left; } div#container h1 { height:12px; padding-top:3px; overflow:hidden; font-size:70%; line-height:130%; text-align:right; background:url(../img/bg_h1.jpg) no-repeat; }
clearfixによるレイアウト崩れ
floatのクリアを処理するためのclearfixを使うと、レイアウト崩れが発生する。
回避方法
無駄なコーディングとなるが、clearfixの後のボックス要素にclear:bothを書く。
div#footer { clear:both; margin-top:50px; font-size:90%; text-align:left; background-color:#eeeeee; }
clearfixセレクタの中にoverflow:hiddenかoverflow:autoを指定する方法もありますが、ブラウザの表示に影響が出る場合があるので、こちらの方法は、お勧めしません。
2010/06/30 13:53