<DIV>ボックスをヨコとタテに段組する -2step脱テーブルスタイルシートCSSレイアウト講座-

.box1{ width: 200px; height: 100px; background-color: #FFCCCC; float: left; } .box2{ width: 100px; height: 100px; background-color: #66CCFF; float: left; } .kaijyo{ clear: left; } 段組するボックス１、２は、特別な変化はありませんが、 タテヨコの段組をするための必需品、段組解除用のボックスを新しく定義してあげる必要があります。 上の、.kaijyoのことです。 ここで、使ってるclear属性は、float属性で定義された回りこみ指定を解除する働きをもってます。 くわしくは、<DIV>をタテヨコに段組していこうで解説しております。 そして、気になるHTMLソース部分はというと、