floatしたカラムの高さを揃える

電脳備忘録

メインコンテンツとサイドバーの2段カラム構成のサイトがあって、メインコンテンツとサイドバーの高さをあわせる必要が出てきました。今までちょいちょい対応はしてきたのですが、備忘録として残してこなかったので今回対応することにします。

参照:floatしたdivの高さを揃える

備忘録

2段カラムになるようにソースを書く(HTMLファイル)

・
・
・
<div id="contents">
<div id="side">
<!-- サイドコンテンツの内容を記述 -->
</div>
<div id="main">
<!-- メインコンテンツの内容を記述 -->
</div>
</div>
・
・
・

cssはこんな感じ。ブラウザが理解できる値は-32767~32767らしいです。

#contents {overflow:hidden;}
#side {padding-bottom:32767px;margin-bottom:-32767px;width:290px;float:left;}
#main {padding-bottom:32767px;margin-bottom:-32767px;width:690px;float:left;}

とりあえず意図したとおりに表示されましたとさ、爽快爽快・・・。

Newer
Older
Dark
Light
menu