1
Dec

Making divs be the same height

How to make 2 divs be the same height without the use of static height in CSS, uses JS, HTML, and CSS

<style>
body{
  margin: 0px;
  padding: 0px;
  text-align: center;
}
.holder{
  text-align: left;
  width: 740px;
  background: transparent;
  margin: auto;
  border: 1px solid #999;
}
.content{
  width: 588px;
  background: #eee;
  float: left;
  padding: 2px;
}
.menu{
  width: 150px;
  background: lightblue;
  float: left;
  padding: 2px;
}
</style>
<br><br>
<div class="holder" id="h">
  <div class="content" id="c">
    The main page content will go here.
<BR><BR><BR>
  </div>

  <div class="menu" id="m">
    Menu stuff here
  </div>
</div>
<br>

<script>
//get the content div
nid = document.getElementById("c");
//get the menu div
id = document.getElementById("m");
//set th menu div's height to the content div's height
id.style.height = nid.offsetHeight;
</script>

Basically it is all in the code, works in IE 6 (only tested in IE 6).

Permalink | Comments (0) | Post RSS