段組の高さを揃える　その2

前に書いた「heightLine.js」がなぜかIEとOperaで上手くいきませんでした…。

ということで違う方法を探したらミラクルなCSSでの実現方法が載っていました♪

外枠のdivの中に高さをそろえたいdivを入れてあげます。
中に入れた二つのdivのpadding-bottomを最大限に伸ばしてあげます。
そしてネガティブマージンで相殺してあげます。

外枠のdivにはみ出た部分の表示を見せないように指定してあげます。

CSSはこんな感じにしました。

#line_suppo {
overflow: hidden;
}
#content , #aside {
padding-bottom: 32768px;
margin-bottom: -32768px;
}

なんと高さが揃うではありませんかっヾ(＠⌒▽⌒＠)ノワーイ!
スタイルシートはネガティブマージンを使うと
デザインの幅がかなり広がります。

これはミラクル！という使い方をご存知の人はぜひ教えて下さいね(*・人・*)

※ネガティブマージンとは：marginにマイナス値を設定すること。

参考サイト：CSS-EBLOG