小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁(コイケヒロヒト)の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

3列段組みレイアウト(3列パーセント指定横幅編)

解説第九弾です。


今までは、メインコンテンツとサイドバーの2列段組みレイアウトでしたが、今回は3列段組みレイアウトに挑戦してみます。


挑戦と言っても、あっさり出来てしまいました。
特に3列パーセント指定横幅でのレイアウトは、比較的簡単でした。
しかし、IEのバグには悩まされました。
ul要素中の改行コードに反応して変なスペースが入ってしまうんです。
改行コードを除去するとFirefoxと同じ表示になりました。

まず、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列段組みレイアウトは、結構難しいです。
これは、次回以降に解説する予定です。

関連ページ: