2カラムで一方のみをセンタリング（ただしIEは無視）

旧サイトは3カラムでごちゃごちゃしていたので、今回はシンプルにいこうと決めていました。実は当初、1カラムを目論んでいたのですが、さすがにカテゴリー一覧をどこに置くか迷い、プルダウンメニューなども考えましたが、ぱっと見てどれだけのカテゴリーがあるのかわからないのがいやだったので、2カラムに変更しました。後付けのサイトメニューを設置するにあたり、今のレイアウトになったのですが、当初は本文を表示するメインカラムをセンタリングできず、先日やっと実現できたのでそのメモです。ただし、例によってIEは無視してます。ご了承ください。

サイト構築時の目標の一つに「div厨からの脱却」がありましたが、それでもいくつかは使っています。divじゃないとまとめられない場合もありますしね。ということでメインとサイトメニュー部分はdivでまとめています。2カラムの実現は、もちろんスタイルシートを用いているわけですが「float」ではなく「position」を利用しいています。サイトメニュー部分のCSSは以下のように記述しています。

div#siteMenu {
position: absolute;
top: 42px;
left: 0;
width: 140px;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/N_background.png) repeat-y;
font-size: 12px;
text-align: right;
}

絶対位置指定で、上から42px、左は0pxとして固定しています。div#siteMenu中の要素でさらにいろいろ調整しています。で、感じのメイン部分ですが、当初はこんな感じでした。

div#main {
position: absolute;
top: 0;
left: 169px;
width: 391px;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/M_background.png) left repeat-y;
}

サイトメニュー部分と同じく、絶対位置指定で左から169pxとっています。自分の作業環境では妥協できる位置だったのですが、当然ながら広いモニタで見ると右の余白が気になってしょうがない状況でした。ということで、以下のように修正

div#main {
/* position: absolute;
top: 0;
left: 169px;*/
width: 391px;
margin: 0 auto;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/M_background.png) left repeat-y;
}

今度は絶対位置指定をやめて「margin」を利用しセンタリングしています。ところがこのままだとウィンドウの幅を狭くしていくと、サイトメニューのしたにメイン部分が潜り込んでいきます。まあそんなに狭くする人もいないと思いますが、なんか気持ち悪いのも事実。こういうのは自分との戦いですからね。ということで以下のように修正。

div#main {
/* position: absolute;
top: 0;
left: 169px;
width: 391px;*/
width: 560px;
margin: 0 auto;
padding: 0 0 0 169px;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/M_background.png) left repeat-y;
background-position: 169px 0;
}

今度は幅を560pxとっています。そして「padding」で、最初に指定していた左からの距離169pxを指定しています。このままだと背景のみが左端によってしまうので「background-position」で左から169pxの位置に指定します。

ややこしい状態になっていますが、簡単に説明すると、幅560pxのボックス内で、すべての要素を右寄せしているイメージです。で、そのすべての要素は391px以内に収まっていて、残りの169pxはなんにも使われずに左端にあるわけです。つまり、いまだ「div#main」は「div#siteMenu」の下に潜り込んでいるのですが、潜り込んでいる部分には何も無いのでそこでピタッと止まったように見えるのです。いやいや、なかなうまく説明できませんね…まあつまりごまかしているわけです。ちなみにSafariで本文のテキストを上から順番に選択していくと、その実体を見れます。ばかでかい選択範囲ができたはずです。

で、問題はIEへのお約束「widthとpadding、borderは一緒に指定しない」を破っていることです。そうです、このままではIEはセンタリングしてくれません。こればっかりはどうしようもないので「XHTMLとCSSでのサイト構築メモ」でも書いた「スターハック」を用いて固定表示しています。

* html div#main {
position: absolute;
top: 0;
left: 169px;
width: 391px;
padding: 0;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/M_background.png) left repeat-y;
background-position: 0 0;
}

こんな感じですね。ということでIEではガンガン下に潜り込みますが、自分との戦いで「最終的にIEは無視」というルールができつつあるので問題ありません。

Category

• Music [15]
• Column [78]
• Mac [29]
• Web [47]