WORK NOTE BLOG

入れ子のboxで中のboxにfloat指定があると背景がとぎれるのの解決策。

CSSでboxを段組しようとして、複数のboxを囲む大枠のboxを置き背景色や背景画像を指定し、中のboxにflaot属性を与えると、Firefoxで背景が途中でとぎれてしまいます。

どういうことかというと

のようにしようとして、

<div id="box">
      <div id="left">    </div>
      <div id="right">    </div>
</div>

のように組み、CSSで＃leftと#rightにそれぞれ左右にfloatするような指定をするとIEでは問題なくても、Firefoxだと

のように表示されてしまします。

●安直編

文法上は正しくありませんが、最も安直な解決策はrightボックスの直下に<br style="clear:both" />を入れて、floatをクリアしてしまうことです。

<div id="box">
      <div id="left">    </div>
      <div id="right">    </div> 
     <br style="clear:both" />
</div>

そうすると、背景がとぎれずに表示されるようになります。

●まっとう編

文法上正しい解決策を取りたいという場合は、下記のサイトを参考にされるとよいと思います。
詳しく検証されており、とても勉強になります。
http://www.fsiki.com/archive/css-doc/float.html

ここでは、http://www.webbibo.com/stylesheet/hack/clearfix.html で、わかりやすくまとめられていたので、それを参考にして書きます。

方法としては、外側のboxにCSSでフロートを解除する属性を与えます。それにより各種ブラウザによる影響を吸収するための対策も施すという流れです。

<div id="box" class="floatoff">
      <div id="left">    </div>
      <div id="right">    </div>
</div>

まず外側のboxにfloatoffというクラスを設定したとします。このfloatoffというクラスをCSSで下記のように設定します。

/* モダンブラウザ用*/
.floatoff:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  max-height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.floatoff {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .floatoff {
  height: 1%;
}
.floatoff {
  display: block;
}
/**/

これでOKだと思います。