Dreamweaverのデザインビューでレイアウト表示が崩れる問題

2018.12.08

ブロックレベル要素のレイアウト崩れ

レイアウト崩れは、親要素に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