Making div to drop down when div beneath it change it's height dimension ?

gitarista · #1 Oct 15th, 2007, 17:25

OK,I will try to be as clear as possible.
I have one div (container) 500pix height containing two another divs in it. One of them is 200 height and another one that is on bottom is 300. Now if I manually change dimension of div that is on bottom to 200 pix, I want the one that is on top to get down as much as it can (so it's 100pix in this case) to the top of the one div that is on the bottom.
So if you understand me I want to make the position of the div that is on the top to depends on the height dimension of the div that is on the bottom, and to always drop down to it so they touch each other.
I need this for some javascript programming...
Thanks

AdRock · #2 Oct 15th, 2007, 22:04

Sounds like something that can be achieved using JavaScript. I personally don't know of any way of doing it but maybe there is

marSoul · #3 Oct 15th, 2007, 23:59

you can achieve to this by javascript, here is the sample code i have created :

HTML: Select all

<!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>
<script type="text/javascript">

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#con {
    background-color: #CCCCCC;
    height: 600px;
}
#first {
    background-color: #666666;
}
#sec {
    background-color: #FFFF00;
    height: 200px;
}
-->
</style>
</head>

<body>

<div id="con">
  <div id="first">Here goes the first div contains</div>
  <div id="sec">Here goes the second div contains</div>
</div>
<script type="text/javascript">;
    //Get the container height
    conH = document.getElementById("con").offsetHeight;
    //Get the top div height
    firstH = document.getElementById("first").offsetHeight;
    //Get the bottom div height
    secH = document.getElementById("sec").offsetHeight;
    //Calculate the difference between container height and bottom height
    firstNewH = conH - secH;
    //Set the new height for the top div
    document.getElementById("first").style.height= firstNewH + "px";
</script>
</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Problems making the content area have a dynamic height	blizeH	Web Page Design	41	Aug 13th, 2007 01:19
Will it slide beneath?	marksk	Web Page Design	7	Apr 26th, 2007 08:58
how do I change the height of an <input type="text"> box?	MikeTheVike	Web Page Design	1	Feb 23rd, 2007 22:23
Making A CSS horizontal, drop down menu	Powderhound	Web Page Design	15	Aug 22nd, 2006 10:42
Making sure the height of both divs is =	csa	Web Page Design	8	May 3rd, 2006 18:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Making div to drop down when div beneath it change it's height dimension ?