HTMLでfloatさせた背景が表示されない場合の対処法

今時IE6,7を確認するHP製作会社がいるのかは不明ですが、少なからず利用ユーザーがまだいるのが現状なので、

背景が出てこない場合のおまじないを少しご紹介致します。

IE7以下では中のボックスをfloatさせると高さをうまく認識してくれず、指定した背景が出てこない場合があります。

サンプル

<style type=”text/css”>
.box{
    background:#FF0000;
}
.box .text1{
    float:left;
    width:100px;
    height:100px;
    background:#3366FF;
}
.box .text2{
    float:right;
    width:100px;
    height:100px;
    background:#009933;
}
</style>
<div class=”box”>
    <div class=”text1″>
        これはテストです。
    </div>
    <div class=”text2″>
        これもテストです。
    </div>
</div>

 

対応方法

こういった場合おまじないとして.boxの高さを100%に指定してみてください。

.box{

height:100%;

}

 

外枠の高さを指定してあげるとしっかりと表示されます。