ここからは、スタイルシートで、WEBサイトをレイアウトするときに必要な、
<DIV>ボックスの段組、というテクニックを練習していきましょう。
ちょっと、わからなければ、
<DIV>をヨコに段組しようで解説してますので、そちらを参考に。
つぎの、ボックス１、２をヨコに段組してください。（属性と値は、float:left）
ボックス１の定義内容は、
横幅が
150px、
縦幅が
100px。
背景色は、
#FFCCCC。
ボックス２の定義内容は、
横幅が
100px、
縦幅が
100px。
背景色は、
#66CCFF。
ボックス１
ボックス２
.box1{
width: 200px;
height: 100px;
background-color: #FFCCCC;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #66CCFF;
float: left;
}
<DIV>ボックスをヨコに段組するには、
回り込みを指定できる、
float属性をつかって、値を、
leftとします。
これが１番基本的な段組ですので、
しっかり身につけてほしいと思います。
ちなみに、ソースは以下のとおり。
<BODY>
<div class="box1"> ボックス１</div>
<div class="box2"> ボックス２</div>
</BODY>
