dei79/demo.html

## demo.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {

	function normalizeHeight($left, $right)
	{
		// get the max height of the two divs
		var $maxHeight = Math.max($left.height(),$right.height())

		// get the lower div
		var $lowerpanel = $left
		if ($lowerpanel.height() > $right.height())
			$lowerpanel = $right

		// set the height of the lower panel
		$lowerpanel.height($maxHeight)
	}

	normalizeHeight($('#left'), $('#right'))
})
</script>
<style>
	#id {
		float: left;
	}

	#left {
		float: left;
		width: 50%;
		background-color: red;
	}

	#right {
		float: left;
		width: 50%;
		background-color: yellow;
	}
</style>
</head>
<body>
	<div id="container">
		<div id="left">
			The left page
		</div>

		<div id="right">
			The right page
			<br/>
			<br/>
			<br/>
			with more content
		</div>
	</div>
</body>
</html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
	<script>
	$(function() {

	function normalizeHeight($left, $right)
	{
	// get the max height of the two divs
	var $maxHeight = Math.max($left.height(),$right.height())

	// get the lower div
	var $lowerpanel = $left
	if ($lowerpanel.height() > $right.height())
	$lowerpanel = $right

	// set the height of the lower panel
	$lowerpanel.height($maxHeight)
	}

	normalizeHeight($('#left'), $('#right'))
	})
	</script>
	<style>
	#id {
	float: left;
	}

	#left {
	float: left;
	width: 50%;
	background-color: red;
	}

	#right {
	float: left;
	width: 50%;
	background-color: yellow;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="left">
	The left page
	</div>

	<div id="right">
	The right page
	<br/>
	<br/>
	<br/>
	with more content
	</div>
	</div>
	</body>
	</html>