Floatプロパティを利用して段組みをしたにもかかわらず、レイアウトが崩れる (IE8,FireFoxで発生しIE7では正常に動作する) - CSS

Floatプロパティを利用して段組みをしたにもかかわらず、段組みが正しく入れ子状態にならず、枠を突き抜けてしまう現象と対策について紹介します。

現象

Floatプロパティを利用してdivタグで段組みをしたにもかかわらず、段組みが正しく入れ子状態にならず、枠を突き抜けてしまう場合があります。（下図参照）
この現象は、IE7では起きず、IE8,Firefoxで発生することが多いです。

コード例

以下のコードで再現できます。

div-layout.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="div-layout.css" />
</head>
<body>
  <div class="container">
    <div class="header"></div>
    <div class="leftColumn">
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
    </div>
    <div class="rightColumn">
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />

    </div>
    <div class="footer"></div>
  </div>

</body>
</html>

div-layout.css

body {
  background-color:#e4e1dc;
}

.container {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background-color: #FFFFFF;
  width:680px;
}

.header {
  height:64px;
  background-color:#303030;
}

.footer {
  margin-top:16px;
  height:64px;
  background-color: #303030;
}

.leftColumn {
  margin-top:8px;
  width:140px;
  float:left;
}

.rightColumn {
  margin-top:8px;
  width:460px;
  float:left;
  border-left: 1px solid #303030;
}

原因

多くの場合フッタ部分でclear:leftの指示がされていないためです。フッタ部のレイアウトを定義するcssスタイル定義にclear:leftを追加するか、フッタ部分の直前でclear:leftのスタイルを指定してください。

修正したコード

上記のコードの場合、以下のコードに修正します。
フッタのクラスに、clear:left; スタイルを追記し、フッタで左寄せをキャンセルする動作にしています。

div-layout.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="div-layout.css" />
</head>
<body>
  <div class="container">
    <div class="header"></div>
    <div class="leftColumn">
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
    </div>
    <div class="rightColumn">
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />

    </div>
    <div class="footer"></div>
  </div>

</body>
</html>

div-layout.css

body {
  background-color:#e4e1dc;
}

.container {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background-color: #FFFFFF;
  width:680px;
}

.header {
  height:64px;
  background-color:#303030;
}

.footer {
  clear:left; /* 追加 */

  margin-top:16px;
  height:64px;
  background-color: #303030;
}


.leftColumn {
  margin-top:8px;
  width:140px;
  float:left;
}

.rightColumn {
  margin-top:8px;
  width:460px;
  float:left;
  border-left: 1px solid #303030;
}

修正結果

追加すると、下図の表示となり正しくレイアウトされます。

別の修正方法

以下のコードの対処法もあります。
endColumnクラスを定義し、段組み終了後に空のendColumnクラスのdiv枠を挿入してfloat:left をクリアします。

div-layout.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="div-layout.css" />
</head>
<body>
  <div class="container">
    <div class="header"></div>
    <div class="leftColumn">
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
    </div>
    <div class="rightColumn">
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />
      aaa<br />

    </div>
    <div class="endColumn"></div>
    <div class="footer"></div>
  </div>

</body>
</html>

div-layout.css

body {
  background-color:#e4e1dc;
}

.container {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background-color: #FFFFFF;
  width:680px;
}

.header {
  height:64px;
  background-color:#303030;
}

.footer {
  margin-top:16px;
  height:64px;
  background-color: #303030;
}


.leftColumn {
  margin-top:8px;
  width:140px;
  float:left;
}

.rightColumn {
  margin-top:8px;
  width:460px;
  float:left;
  border-left: 1px solid #303030;
}

/* 追加 */
.endColumn {
  clear: left; 
}

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

Floatプロパティを利用して段組みをしたにもかかわらず、レイアウトが崩れる (IE8,FireFoxで発生しIE7では正常に動作する) - CSS

現象

コード例

原因

修正したコード

修正結果

別の修正方法

関連するページ