Equal Height Division Using Javascript And CSS
Mar
27
2009
Written by admin
This technique is really simple. Having equal height division in your design is sometimes necessary to maintain consistent look and feel on your layout. You can use this technique to make your sidebars equal height, or to make your content area and the sidebars equal height.
Get The Source Code: Without Jquery With Jquery
Step 1:
Create an index.html file for your layout. I create an example html layout for this article.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Division Using Javascript and CSS</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" language="javascript" src="javascript.js">
</script>
</head>
<body onload="grabtheclass()">
<div class="outer">
<div class="inner">
<div class="main">
<p>The Main Content</p>
<p>The Main Content</p>
<p>The Main Content</p>
<p>The Main Content</p>
<p>The Main Content</p>
</div>
<div class="sidebar">
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
</div>
</div>
</div>
</body>
</html>
Recent Comments