こんな感じのレイアウト
tableを使わないと不可能だと思ってたけど普通にできちゃうんだねぇ
サンプル
css3のbox-sizingを使った
1 2 3 4 5 | /*初期値 paddinもborderも含めない*/ box-sizing:content-box; /*paddingとborderを含める*/ box-sizing:border-box; |
どっちにしろmarginは含ませる事は出来ないのでレイアウトによってはちょっとした工夫や無駄な要素が必要になるかも。
対応ブラウザ
firefox以外のモダンブラウザーには実装済みで
そのfirefoxもベンダープレフィックスをつければ使える。
| ブラウザ | 確認したバージョン | ベンダープレフィックス |
|---|---|---|
| safari | 5.1.2 | 不要 |
| chrome | 20.0.1132.52m | 不要 |
| firefox | 13.0.1 | 必要（-moz-box-sizing: border-box;） |
| opera | 11.64 | 不要 |
| IE | 9 | 不要 |
| IE | 8 | 不要 |
他の手段を使って同じように組む事も出来るのかな？
