囲んで、2つのブロックを作成しました。この2つのブロックが横に並ぶように、CSSでスタイル指定しましょう。CSSのfloatプロパティで2段組みにする場合、floatプロパティを指定すると同時に、widthプロパティでそれぞれのカラムの横幅を指定してやる必要があります。base.cssに以下の記述を追加してください。{clear:both;/*フロート配置をクリアする*/}保存をしたらブラウザで表示してみましょう。2段組みになれば成功です。その際に指定したのは、画像を右寄せにして残りのテキストを自動的に左側の空いたスペースへ流し込むスタイルでした。float:left;を指定することで2つのカラムを横に並べています。横に並べる2つのカラムの横幅の合計(260px+660px=920px)が、親ボックスの横幅(1000px)より小さくなるようにスタイル指定している点に注目してください。親ボックスの横幅を超えると、カラム落ちしてしまって段組みにならないので注意が必要です。要素をフロート(浮遊)させて段組みレイアウトを作る場合、floatプロパティを指定する要素には同時にwidthプロパティも指定して横幅を確定させます。横幅を確定させてやらないと、要素をフロートさせても反対側にスペースが生まれず、後に続く要素を横に表示することができないためです。floatプロパティで段組みレイアウトを作成する場合のカラムの横幅の決め方ですが、まず親となる全体のボックスの横幅を指定します。次に左カラム、右カラムの横幅をそれぞれ指定します。左カラムと右カラムの横幅の合計は、その親となる全体ボックスの横幅と同じかそれ以下になるようにします。そのうえで、左カラムと右カラムにfloatプロパティを指定してフロート(浮遊)させることで、収まり良く段組みレイアウトが仕上がります。この際、左右カラムに指定するfloatプロパティの値はleftでもrightでも段組みレイアウトとなります。指定する値によってそれぞれのカラムが左右どちらかに寄せられます。ちなみに「画像のフロート配置」では、特に横幅の指定を意識しなくてもフロート配置ができました。これは、画像自体が固有の横幅と高さを持っているためです。CSSのwidthプロパティで横幅を指定しなくても、画像には固有の横幅があるため、後に続くテキストが空いたスペースに流し込まれたのです。今回作成した2段組みの場合、段組みを含む親ボックス全体の横幅は1000pxと指定しています。左カラムの横幅は260px、右カラムの横幅は660pxと指定しました。左カラムと右カラムの横幅の合計が、親ボックス全体の横幅よりも小さいために、左右に並んで2段組みレイアウトとなっています。ちなみに、左右カラムの横幅の合計は260px+660px=920pxですので、親ボックスの1000pxよりも80px小さく指定していることに疑問を感じるかもしれません。これは、左右カラムに後からマージン(外側余白)やパディング(内側余白)を指定することを想定しているためです。後から指定する予定のmarginプロパティとpaddingプロパティの数値の分だけ、widthプロパティで指定する数値を小さくしてあります。CSSソース中にコメントを入れておくHTMLソース中にコメント入れたのと同様に、CSSソースにも適宜コメントを入れましょう。いったブロック名をコメントとして入れておくと、後で見直した際にどのブロックのCSSソースがどこに記述してあるのか探しやすくなります。フロートを指定したらクリアするさて、ここまでのスタイル指定で2段組みレイアウトを作成することができました。段組みにはなったのですが、レイアウトが崩れてしまったようにも見えます。small要素でマークアップしているコピーライト表記の部分が、コンテンツ部分の右側に来てしまっています。白くしたはずの背景が途中で途切れてしまっています。この問題はフロートをクリアすることで解決します。次回、解決していきましょう。