CODEWITHSUNDEEP
htmlcss
RamyaSree
RamyaSree

Reputation: 123

increase div heights based on the other div height

I am having one main Div,With in that i placed 3 divs (left ,center,right). My requirement is, When ever center div increases height automatically left and right divs height should be increased as same as middle one.I put total effort on this task,But i am unable to do.Please let me know which CSS properties should be used.Here is the Fiddle 

<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</br>Center<br/>Center<br/></div>
<div class="right">Right</div>
</div>

Upvotes: 1

Views: 2825

Answers (4)

Divya Bhaloidiya
Divya Bhaloidiya

Reputation: 5064

You can user javascript for this get the height of center div and set to left and right div. 

<script type="text/javascript">
    // get height of center div
    var heightCenterDiv =  document.getElementById('id').clientHeight;

    //set height of left and right div
    document.getElementById('leftdiv -id').style.height = heightCenterDiv+"px";
    document.getElementById('right -id').style.height = heightCenterDiv+"px";
</script>

for you code you can use class instead of div id.

Upvotes: -1

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/ZkXak/2/

CSS

     .mainDiv{ position: relative;}
    .left{ position: absolute;background:red; left: 0; top: 0; width: 100px;

        float: left;

        z-index: 100;
        height:100%;
    }

.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px; height:100%; }
.center{ margin: 0 100px;background:green;  height:100%;}

CSS scale divs in float layout

Try this Demo also

http://css-tricks.com/fluid-width-equal-height-columns/

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Used to bottom :0; according to @Mr_Green

As like this 

.mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; bottom:0;}
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;bottom:0; }
.center{ margin: 0 100px;background:green; }

Demo

Upvotes: 0

z1m.in
z1m.in

Reputation: 1661

http://jsfiddle.net/pfqpR/

 .mainDiv { 
      height: auto;
 }
 .left, .right { 
      height: 100%;
 }

Upvotes: 6

Related Questions