Equal Height Division Using Javascript And CSS
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>
STEP 2:
Now we will create a stylesheet for the layout we just created. Let’s name it as style.css.
/*The Styles*/
p {
text-align:center;
font-family:Georgia;
font-size:18px;
font-variant:small-caps;
color:#555555;
padding:0;
margin:20px 10px 20px 10px;
}
a {
color:#FFFFFF;
font-size:11px;
}
.outer {
background:#FFFFFF;
margin:0 auto;
width:800px;
}
.inner {
width:100%;
float:left;
}
.main {
background:#00A2FF;
width:500px;
float:left;
border-right:1px solid #000;
margin-left:-1px;
}
.sidebar {
background:#EEEEEE;
width:300px;
float:right;
}
STEP 3:
Finally, here comes the javascript code that controls the height of the divisions and makes them equal height.
var DivOneClassArr = new Array();
var DivTwoClassArr = new Array();
function getElementsByClassName( ClassName1, ClassName2, obj ) {
if ( obj.className == ClassName1 ) {
DivOneClassArr[DivOneClassArr.length] = obj;
}
if ( obj.className == ClassName2 ) {
DivTwoClassArr[DivTwoClassArr.length] = obj;
}
for ( var i = 0; i < obj.childNodes.length; i++ )
getElementsByClassName( ClassName1, ClassName2, obj.childNodes[i] );
}
function grabtheclass() {
DivOneClassArr.length = 0;
aryClassElements2.length = 0;
getElementsByClassName( 'main', 'sidebar', document.body );
for ( var i = 0; i < DivOneClassArr.length || i < DivTwoClassArr.length; i++ ) {
if(DivOneClassArr[i].offsetHeight > DivTwoClassArr[i].offsetHeight) {
DivTwoClassArr[i].style.height = DivOneClassArr[i].offsetHeight +'px';
}
else if (DivOneClassArr[i].offsetHeight < DivTwoClassArr[i].offsetHeight) {
DivOneClassArr[i].style.height = DivTwoClassArr[i].offsetHeight +'px';
}
}
}
Analysis: This script calculate the height of the divisions taking their class name in the function grabtheclass(). The division with more height is selected by comparing the height of the two divisions. If division div1 for instance is having more height, then the other division say div2 with shorter height will be assigned a new height equal to the height of div1. This is what the code does to make them equal height.
STEP 4 (Optional):
This step is optional only. Here instead of using the above javascript code, jquery library is used. Then the code below can be used to get similar result. To use this javascript code, you need to import jquery library. You can get jquery library here Jquery.com.
Add the jquery library file in the head section of your html.
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
and you can remove the onload attribute in the <body> since this is not necessary anymore if we use jquery.
Now create a file named javascript.js or use the one you created before and use the code below.
$(document).ready(function(){
if($('div.main').height() > $('div.sidebar').height())
{
$('div.sidebar').css({
'height':$('div.main').height()
});
}
else if($('div.sidebar').height() > $('div.main').height())
{
$('div.main').css({
'height':$('div.sidebar').height()
});
}
});
November 1st, 2010 at 6:52 AM
Many thanks for this. New to adjusting WordPress and wanted a static menu like ordinary html type site. This menu extends over the header and footer. Needed to set the Entry and Sidebar-Widget columns equal then set the overlaid menu to extend correctly. Got this working in basic html then found out that it can be awkward to get javascript to run correctly in WordPress! After much deliberation I tried putting the code directly inside the phpcode widget after the menu .html code and just called grabtheclass(); at the end of the script. Works great!!! Just needed slight adjustment of widget col when entry col longer (10px padding somewhere).