2010/08/12
今回このサイトでblogのサイドカラムやトップの3カラム横並びをcss3のdisplay:boxで実装してます。
display:boxを利用すると、それを設定した親セレクタの下のボックスが自動的に横並びになり、かつ高さを自動的にそろえてくれます。
要するにfloatからの脱却ができるわけですね。（Safari , Google Chrome , Firefoxで利用可能。IEはdisplay:box未実装なので。。。）
こちらの方とかあとこちらの方のエントリーがわかりやすかったです。
詳しくはそっちを見てね。。。で終わってしまうのもなんなので以下私が気づいた点をいくつか。
firefoxでmargin:0 auto;が利かない
2カラムレイアウトとかで中央よせになってるデザインがよくあると思います。今のところdisplay-boxを指定してあるとmargin:0 autoを指定しても中央に来てくれません。
親要素にtext-align:center;を指定すると中央に来てくれます。IEみたいな挙動ですね。。。
かってに横幅が拡張される
親boxにdisplay:boxとともにwidthをきっちり指定してる場合でも、子ボックスの横幅合計がその数値を超えるとその分指定幅を無視して横にひろがります。webkit系とfirefox両方でそういう挙動ですが、微妙に広がり方がちがっています。
これだと意図しないカラム落ちはしませんが、floatを利用した時のように指定幅を超えたら自動で折り返して二段目に、みたいな実装ができないわけですよ。
なにか方法ありそうな気もするけど。。。
floatでいいんじゃない？
ユーザー数の一番多いIEで未対応なので、対応環境にＩＥを含める場合なにか対策を考える必要があります。今回うちではスターハックでIEのみfloatにしてます。
残念ながらoperaさんには犠牲になってもらったよ。。。(オペラの最新版でいままでのオペラ用ハックが使えなくなってたりして、これ以上((複雑怪奇かつ将来性が保障されない))ハックつかうのやだー。display：boxにとっとと対応してください。大丈夫君ならできる。IEとはちがうのだよ、IEとはっていうところを見せてry）
また現在対応しているのはfirefoxとwebkit系のブラウザですが、display：boxの指定にそれぞれのプレフィックス、余白の挙動が違ったりするのでそれの対策用の記述などが必要です。
まだ色々策定中なのでしょうがないともいえますが、裏をかえせば今後のバージョンアップで挙動がどう変わるかわからないというメンテナンス上の不安が。
そこまでして使うメリットがいまいちなような。
