前回に引き続き，今回はfloatプロパティを利用した実用度の高いボックスの配置の実現方法を解説します。

練習用HTML

floatプロパティを利用したレイアウトの練習に複雑なHTMLを用意する必要はありません。ボックスの配置方法さえ理解してしまえば，その手法はあらゆる要素に適用でき，また，配置された各ボックスがどのような内容を持とうともレイアウトには影響しないからです。

サンプルとなるHTMLは以下の通りです。

<div id="box-A">
    <div id="box-B">
        B
    </div>
    <div id="box-C">
        C
    </div>
    <div id="box-D">
        D
    </div>
</div>

CSSを個別に指定できるように，各要素にはid（#box-AからD）を振りました。解説ではid名ではなく，単にボックスA, ボックスB...と呼ばせていただきます。

背景色を着けてボックスを確認

まずは，要素の生成するボックスを視覚的に把握しやすいように，それぞれに背景色を指定しましょう。

#box-A {
    background-color: #333;
}

#box-B {
    background-color: #99CC00;
}

#box-C {
    background-color: #993399;
}

#box-D {
    background-color: #CC6600;
}

表示ではボックスAが見当たりませんが，3つのボックスの後ろに隠れています。

ボックスBとCをフロート

次に，ボックスBとCに横幅（width）と寄せ（float）を指定しましょう。

#box-A {
    background-color: #333;
}

#box-B {
    background-color: #99CC00;
    width: 300px;
    float: left;
}

#box-C {
    background-color: #993399;
    width: 300px;
    float: left;
}

#box-D {
    background-color: #CC6600;
}

ブラウザの表示を確認すると（大きめのウインドウサイズにして下さい），ボックスDにはfloatを指定していないにも関わらず，3つとも横に並んでいるように見えます。しかし，実際にはボックスDはフロートしたボックスAとBの後ろに重なるように配置されています。