This tutorial contains a JavaScript function that can be used to set the same Height for multiple HTML elements.
It is useful when you have multiple DIVs (or other HTML tags) with dynamic content (different height), and you want to make them all the same height.

Add the following JavaScript script at the bottom of your HTML document, before the </body>, or after all the tags you want to align.
In this instruction: alignHgs('id1', 'id2', 'id3');, replace the arguments: 'id1', 'id2', 'id3' with the ID of the HTML tags you want to align. You can add as many IDs as you want, each one between quotes, separated by comma.

Script code:

<script type="text/javascript"><!--
// - coursesweb.net

// get the height of the HTML TAGs which ID passed in parameters
// sets the max-height to each tag
function alignHgs() {
  // get the arguments and their number
  var args = alignHgs.arguments;
  var args_nr = args.length;

  // traverse the array with arguments, get the height of each TAG and add it in the "ar_hgs" array
  var ar_hgs = new Array();
  for (var i=0; i<args_nr; i++) {
    ar_hgs[i] = document.getElementById(args[i]).clientHeight;
  }

  // get the largest number (max height) in the "ar_hgs" array
  var max_hg = Math.max.apply(null, ar_hgs);

  // set max height to all tags in arguments
  for (var i=0; i<args_nr; i++) {
    document.getElementById(args[i]).style.height = max_hg+'px';
  }
}

// calls the function with the IDs of the tags
alignHgs('id1', 'id2', 'id3');
--></script>
- This script gets the maxim height of the elements with the ID passed as arguments, then it sets that value to each of those tags, when the page is loaded.

If you want to align the heights when a link, or a button is clicked, just delete the "alignHgs('id1', 'id2', 'id3');" from the script and add this instruction in that link (or button), with onclick="alignHgs('id1', 'id2', 'id3');". Se also the example below.
This example has three DIVs with different heights, and a button which calls the alignHgs() function when a user clicks on it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Height align</title>
<style type="text/css">
div {
 float:left;
 width:30%;
 margin:2px;
 border:2px solid blue;
 background-color:#e7fee8;
}
</style>
</head>
<body>

<div id="dv1">marplo.net - Free courses</div>
<div id="dv2">
 coursesweb.net - Free Web development courses:<br />
 - video tutorials<br />
 - free lessons and download resources
</div>
<div id="dv3">
 www.php.net - PHP team website<br />
 - server-side scripting language.
</div>
<br style="clear:both;" />
<button onclick="alignHgs('dv1', 'dv2', 'dv3')">Align</button>

<script type="text/javascript"><!--
// - coursesweb.net

// get the hight of the HTML TAGs which ID are sent as parameters
// sets the max-height to each tag
function alignHgs() {
  // get the arguments and their number
  var args = alignHgs.arguments;
  var args_nr = args.length;

  // traverse the array with arguments, get the hight of each TAG and add it in the "ar_hgs" array
  var ar_hgs = new Array();
  for (var i=0; i<args_nr; i++) {
    ar_hgs[i] = document.getElementById(args[i]).clientHeight;
  }

  // get the largest number (max height) in the "ar_hgs" array
  var max_hg = Math.max.apply(null, ar_hgs);

  // set max height to all tags in arguments
  for (var i=0; i<args_nr; i++) {
    document.getElementById(args[i]).style.height = max_hg+'px';
  }
}
--></script>

</body>
</html>
The browser will display the following result (click the "Align" button):
marplo.net - Free courses
coursesweb.net - Free Web development courses:
- video tutorials
- free lessons and download resources
www.php.net - PHP team website
- server-side scripting language.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Make HTML elements the same height

Last accessed pages

  1. HTTP Errors and Logging (39)
  2. Add, Change, and Remove Attributes with jQuery (35999)
  3. Select in MySQL, Output results in HTML Table (3789)
  4. jQuery Drag and Drop Rows between two similar Tables (6875)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)