三十八日目！（２カラム化、段落ち）

●２カラム化のテクニック
「第２章CSSのキホン」で簡単に解説しているとおり、２カラム化のテクニックはそれほど難しくない。かくカラムとなる、div要素にwidthプロパティで幅指定し、floatプロパティで左右どちらかにシフトさせるだけでOK。

#primary-contents {
   float: left;  /* 左にフロート */
   width: 420px;
}
#secondary-contents {
   float: right;  /* 右にフロート */
   width: 290px;
}


「div#primary-contents」と「div#secondary-contents」に指定しているfloatプロパティの値を入れ替えることで、左右の位置を変更することも可能。

ただし、ここで注意しなければならない以下の２点。

後続の要素の回り込み解除
「div#primary-contents」と「div#secondary-contents」にフロートを指定したことで、後続の内容も回りこんでしまう現象が発生する。

これは、「フロートされた要素は、親要素（作例では「div#container」）の高さとは無関係に配置される」というCSS仕様の決まりがあるため。この場合、「div#footer」にclearプロパティを指定して回りこみを解除するか、「clearfix」というテクニックを利用して、後続の要素が出現する前に回りこみを解除する対策が必要。

ここでは「div#container」に背景色をしており、「div#footer」に「clear:both;」と指定して回りこみを解除しても「div#container」の背景色は領域全体に塗られないので、簡易的な「clearfix」（「overflow:hidden;」と指定）で回りこみを解除する。

#container {
   overflow: hidden;  /* 簡易的な　clearfix */
}
/* IE 6 に適用 */
* html #container {
zoom: 1;
}


カラム落ち（段落ち）
マルチカラムレイアウトを習得する際に、必ずといってよいほど遭遇する問題は「カラム落ち」（段落ち）。カラム落ちとは、各カラムを左右に並べようとしても、それぞれのボックスサイズが大きすぎるためにおさまりきらず、どちらかのカラムが下に落ちてしまう状態。

例えば「div#primary-contents」の幅を「420px」ではなく「520px」にした場合「」div#secondary-contents」がおさまりきらず、下に落ちてしまう。したがってwidthプロパティの値を「520px」から「420px」に変更すれば解決することになる。

#primary-contents {
   float: left;
   width: 420px;  /* 520pxを420pxに変更 */
}


他のカラム落ちの発生理由としては、おおよそ次の4つが考えられる。

●widthプロパティとともにpadding、borderプロパティを指定したことでボックスサイズが大きくなってしまっている。widthプロパティはあくまで内容領域の幅指定である点に注意。

●とても長いURLや、１行のセル数がとても多い表、親要素のボックスサイズよりも大きい画像の挿入などのため、IEの古いバージョンでボックスの大きさが拡張されてしまっている。

●IEの古いバージョンで、floatプロパティとともに指定したmarginプロパティの値が大きく解釈されてしまっている。

●IEの古いバージョンで、ほかのブラウザとボックスモデルの解釈が違う。これを「ボックスモデルバグ」という。

どうしても原因がわからない場合には、一部のコンテンツを削除しながら（XHTMLで対応するソースコードを削除しながら）確認していく。あるコンテンツを削除してみたときにカラム落ちが直れば、そのコンテンツが悪さをしている（CSSによる幅指定などに問題がある）と考えることができる。

今日はここまで。