CSSのボックスレイアウト（左右2段組）

昨晩の雪にビックリなYu-ichiです

今回は、CSSのボックスレイアウトの応用として、左右2段組のレイアウトをご紹介したいと思います。

まず前回作った基本のボックスを外枠として使いたいと思います。
その為に、まず横幅を500pxに拡張します

【HTML】

<div class=”box1″>
　　ボックス１
</div>

【スタイルシート】

div.box1 {
　　width:490px;
　　border:#cccccc solid 1px;
　　margin:0 auto;
　　padding-left:10px;
}

【完成】

次に、ボックス１の中にボックス２（左）・ボックス３（右）を作成します。

【HTML】

<div class=”box1″>
　　ボックス１
　　<div class=”box2″>ボックス２</div>
　　<div class=”box3″>ボックス３</div>
　　<br style=”clear:both;”>
</div>

作成したボックス２・ボックス３をそれぞれ左右に回り込むようスタイルシートを記述します。
最後の<br style=”clear:both;”>はfloat解除用に入れています。

【スタイルシート】

div.box2 {
　　width:228px;
　　border:#cccccc solid 1px;
　　float:left;
}

div.box3 {
　　width:228px;
　　border:#cccccc solid 1px;
　　float:right;
}

【完成】

これで、ボックス２はボックス１の左側へ、ボックス３はボックス１の右側へ揃えられます。
ボックス３でfloat:right;を指定しない方法でも2段組にできますが、
その場合、ボックス２に寄ってしまうので、marginで間隔をあけてあげる必要があります。

さて、いかがでしたでしょうか？

今回は回り込みの解除を<br>タグにclearをつけることで解除していますが
<p>タグや<div>タグでボックス４を作ったりと他のタグにclearをつけても良いです。
他にもボックス１の高さを決めてしまう方法や、overflow:hidden;を使う方法、
CSSハックを利用したクラス要素を用意する方法があります。

ですが、オーソドックスなclearを使った自然な解除ができるデザインが一番だと思います。

3段組、4段組などになったら、ネガティブマージンという技を使った方が良いと思います。

それでは、いつものランキング応援クリックお願いします