各ボックスの設定
このページでは、#container、#left、#rightのボックスの設定をします。
まず、最初に入力したボックスを確認してみましょう。
#containerの中に、#leftと#rightが入っています。これは前のページで解説した入れ子構造ですね。
そして、#leftと#rightはそれぞれ左と右に横並びに配置されています。これを「回り込み」といいます。
#containerの設定
今回の#containerは、#leftと#rightをグループ化して中央に寄せる役割をしています。背景色などは特になく透明なボックスです。
style.css
#container{
width:900px;
margin:20px auto 20px auto;
}
#leftと#rightの設定
次は#leftと#rightのデザインの指定と、回り込みを設定しましょう。
style.css
#left{
background:rgb(100%,100%,100%);
border-radius:7px;
padding:15px;
width:260px;
float:left;
}
#right{
background:rgb(100%,100%,100%);
border-radius:7px;
padding:15px;
width:560px;
float:right;
}
| float:○; | ボックス要素などを水平に並べます |
|---|
ポイントは、widthで幅を指定し、floatを適用することです。
注意として、2つのボックスの「幅＋左右padding＋左右margin＋左右borderの合計」が親要素の横幅を超えてはいけません。
今回の場合、borderとmarginは指定していませんが、paddingを全方位に15px指定しています。
なので、「(left)260px+15px+15px + (right)560px+15px+15px = 880px」で、
親要素（#container）の900pxを超えていないため問題ありません。
確認
回り込みができているか確認しましょう。
見本ページを新しいタブで開く#leftと#rightが水平にうまく並びましたね。
しかし、#footerが崩れてしまいました。これは、「回り込みの解除」を行っていないためです。
回り込みを設定した場合、次のページで解説する回り込みの解除を必ず行いましょう。