テーブルを使わないレイアウト

divタグとcssでページレイアウトをする勉強をしています。
↓ここの内容がとても参考になりました。
CSSによる段組（マルチカラム）レイアウト講座
desperadoes.biz - 


はじめてfloatという指定を使いました。
相対幅で指定するのと絶対幅で指定するので
どういう違いや支障があるかもよくわかりました。

IEの嫌なクセ

こうしてレイアウトをしてみると、
IEには実はいろんな問題があるんだなあ、と改めて認識しました。


ページにあるとおりにやっても、IEだけセンタリングができなくて、
調べたところ、IEのバグ？なんだそうで。


IEが、div {margin: 0 auto}の指定で子要素のセンタリングが効かないため、
わざわざその親要素をつくってあげてtext-align: centerとするのは、正直めんどくさい。
しかもそのせいで、せっかくちゃんと指定できてるほかのブラウザに対しても
あとから調整をしてあげなきゃいけないし。。


ついでに、まだわかってなかった記述方法も把握することが出来たのはよかったです。
マージンの数値を2つだけ指定すると「上下」「左右」という意味になる、とか、
＊{ : ;}ですべての要素に対して指定できる、とか。。
(しらなすぎw)

結論。

いろんなサイトをのぞいて勉強したところ、結果として
左-中央-右の3カラムのレイアウトでは
すべての幅を固定にするのがいちばん簡単なように思いました。


まず外側のコンテナの幅を固定、
左・中央・右のカラムを指定幅に。
左と中央は左フロート、右は右フロート。
ついでにセンタリングもやめて、普通に左寄せ。
こうすれば、ブラウザごとのクセも
あまり影響しないんじゃないかと思った次第です。


ちいさい画面でみたときに、スクロールがでてしまうのですが
もとの幅を小さめにしてレイアウトしておけば
それほど著しい支障はでないのではないかと妥協していますw