Negative Margin Trick

Posted at 2005-03-20T22:42:00+09:00 in Web Design

どうしてもフッターが横幅いっぱい出ないと気持ちが悪かったので、デザイン自体はそのままでCSSをいじり倒してみました。positionでの絶対配置によるレイアウトのままで、フッターを常にページ最下段に置きかつ横幅いっぱいというのはメンドクサそう(height周りの実装がバリエーションに富んでいるので)なので、floatによるレイアウトに戻してみました。うちのサイトはHeader + (Liquid Column + Fixed Column) + Footerという構成なので、いわゆるCreating Liquid Layouts with Negative Marginsというのを利用して、レイアウト。てか1年半前から使いつづけていたモノに戻ったとも言う。

モックアップはこのようになってます。#headerと#footerは何も考えずに、通常のフローに従って配置するので、特に何もレイアウト的に凝る必要は無いですが、#footerにclear: both;を指定しておく必要はあります。主要な部分は#contentsへ指定するmargin-rightで、この値に#sidebarの(Fixedな)幅分マイナス方向に指定してやります(つまり#sidebarの幅を300pxにしたいのなら、#contentsのmargin-rightに-300pxを指定するということ)。これで大体完成ですが、このままだと#contentsと#sidebarが重なり合ってしまう(まぁそういう風に指定しているわけですが)ので、#contents直下の全てのブロック要素に、margin-rightで#sidebarの幅分プラス方向に指定してやると重ならなくなります。

これでレイアウトはほぼ問題無いんですが、各カラムにbackgroundプロパティで背景に上から下まで色を塗る(背景画像を敷き詰める)といったことは出来ません。その場合はbody要素にbackgroundを指定してうまいことやるという、Faux Columnsというテクニックを応用して利用する必要があるでしょう。

何も考えずにHeader + (Liquid Column + Liquid Column) + Footerで作るならば、二つのカラムのwidthを足して100%になるようにすれば良いわけで、何気にあまり役に立たなかったりします。が、うちのサイトのようにどうしてもいわゆるサイドバーにあたるカラムを固定したい時には役に立つかも。