3列段組みレイアウト(3列パーセント指定横幅編)
解説第九弾です。
今までは、メインコンテンツとサイドバーの2列段組みレイアウトでしたが、今回は3列段組みレイアウトに挑戦してみます。
挑戦と言っても、あっさり出来てしまいました。
特に3列パーセント指定横幅でのレイアウトは、比較的簡単でした。
しかし、IEのバグには悩まされました。
ul要素中の改行コードに反応して変なスペースが入ってしまうんです。
改行コードを除去するとFirefoxと同じ表示になりました。
- サンプルページ(3列段組みレイアウト)
http://chaichan.lolipop.jp/src/sboth.htm
まず、HTMLの文書構造は、サンプルページのソースを見てもらえれば分かるように、以下のように非常にシンプルです。
IE用の特別なdiv要素などは必要ありません。
- header_containerというidのdiv要素(ヘッダー)
- menubar_containerというidのdiv要素(メニューバー)
- left_sidebar_containerというidのdiv要素(左サイドバー)
- contents_containerというidのdiv要素(コンテンツ)
- right_sidebar_containerというidのdiv要素(右サイドバー)
- footer_containerというidのdiv要素(フッター)
CSSの方も、非常にシンプルです。
left_sidebar_container、contents_container、right_sidebar_containerを親要素に対して、各々フロートさせて、横幅を20%、59.9%、20%でとるだけです。
contents_containerを59.9%にしているのは、60%だとIEではカラム落ちが発生する場合があるためです。
今回の3列パーセント指定横幅段組みレイアウトは、非常にシンプルなのですが、サイドバー2列固定幅の3列段組みレイアウトは、結構難しいです。
これは、次回以降に解説する予定です。
関連ページ:
- 解説第一弾:ドキュメントタイプと表示モード
http://d.hatena.ne.jp/chaichanPaPa/20090303/1236082845 - 解説第二弾:SEOとメタ要素とタイトル要素
http://d.hatena.ne.jp/chaichanPaPa/20090304/1236169917 - 解説第三弾:HTMLマーキングで文章構造化
http://d.hatena.ne.jp/chaichanPaPa/20090306/1236343007 - 解説第四弾:段組みレイアウトの解説
http://d.hatena.ne.jp/chaichanPaPa/20090308/1236483305 - 解説第五弾:CSS詳細部の解説1
http://d.hatena.ne.jp/chaichanPaPa/20090311/1236774374 - 解説第六弾:CSS詳細部の解説2
http://d.hatena.ne.jp/chaichanPaPa/20090312/1236860887 - 解説第七弾:右サイドバーを左サイドバーへ
http://d.hatena.ne.jp/chaichanPaPa/20090313/1236949117