2カラム用の高さを揃えるスクリプト「Equal Height Javascript」[js]

impressivewebsより、2カラム用の高さを揃えるスクリプト「Equal Height Javascript」の紹介です。

デモページはコチラから

js0904192.jpg

カラムの高さを揃えるスクリプトです。以下必要なソースの一例です。

このスクリプトでは、カラムにはID名として、right_columnとleft_columnをつけなければなりません

HTML

<div id="left_column">
<p>........</p>
</div>

<div id="right_column">
<p>.....</p>
</div>

CSS

#left_column {
	float: left;
	width: 180px;
	border: solid 1px #ccc;
	padding: 10px;
	margin: 0 20px 0 0;
}

#right_column {
	float: left;
	width: 180px;
	border: solid 1px #ccc;
	padding: 20px;
}

上記でカラムにはID名として、right_columnとleft_columnをつけなければならないと書きましたが、もしID名を変えたいときは、下記のjsのソースのright_columnとleft_column箇所を任意のIDにすることは可能です。

JavaScript

var myLeftColumn = document.getElementById("left_column");
var myRightColumn = document.getElementById("right_column");

このスクリプトは、2カラム専用です。もし、3カラム以上のレイアウトのときには、別のスクリプトの使用をオススメします。

下記がそのスクリプトです。