« iframeのcss | トップページ | IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け »

高さの異なるカラムを揃えるスタイルシート

2カラムや3カラムで背景色などが入っている場合、
片方が短かったりすると背景色が途中で途切れたりしてしまいます。

今まではjsで揃えていたのですが、あるシステムへ組み込みしなければならず、jsを使うのが大変そうだったので調べたところ、それを解決できる、高さの異なるカラムを揃えるCSSがありました!



[CSS]高さの異なるカラムを揃えるスタイルシート



それぞれのカラムに、同じ数値で、プラス値のpadding-bottomと、マイナス値のmargin-bottomを指定し、そのカラムを囲っているdivへ「overflow: hidden;」を指定するだけ。

これでばっちりできました!
IE、Firefox、Safari、Opera等で動作確認できました!

« iframeのcss | トップページ | IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け »

css」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1139838/29577768

この記事へのトラックバック一覧です: 高さの異なるカラムを揃えるスタイルシート:

« iframeのcss | トップページ | IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け »