How to set a 'div' height same with his neighbor?

Question

I am using bootstrap as my CSS framework. Now I have some dynamic content in the left side div, and some static content in the right div. I want to the height of right side div auto change base on the height of left side div. Is that possible?

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span5 offset1">
    <div class="well">
      Dynamic Content
    </div>
  </div>
  <div class="span5">
    <div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;">
      Static Content
    </div>
  </div>
</div>

Answer 1

You could do this

<div class="wrapper">
    <div class="dynamic">
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
    </div>
    <div class="static">
        Static<br />
        Static<br />        
    </div>
</div>

CSS

.wrapper {
    position: relative;
    width: 400px;
    overflow: auto;
}

.dynamic {
    position: relative;
    background-color: yellow;
    width: 200px;
}

.static {
    position: absolute;    
    background-color: orange;
    width: 200px;
    float: left;
    left: 200px;
    top: 0px;
    bottom: 0px;
    right: 0px;
}

Answer 2

I think jQuery is the best solution to achieve this. Check out my fiddle:

http://jsfiddle.net/PHjtJ/

$(document).ready(function() {

    var dynamic = $('.dynamic');
    var static = $('.static');

    static.height(dynamic.height());

});

Answer 3

the solution depends on the behavior you want in the case where the static column is larger than the dynamic one. [I actually think you want the second scenario.]

Notice: both case are pure CSS, and without specifying any height whatsoever. also, not specifying a margin of any sort, so you can change the width of the column at your will, without the need to calculate the margin/position again and again..

1. if you want the dynamic column to enlarge, and to be as the static height: so you actually want the columns to always be a the same height. and that can be easily achieved with CSS table layout styling. in that case: See this Fiddle (the script is only for adding dynamic content, this is a pure CSS SOLUTION)

2. if you want the dynamic column to stretch only to its content height, and the static one to have the same height + a scroller. in that case: see this Fiddle (again: the script is only for adding dynamic content, this is a pure CSS SOLUTION)

in both cases, the static column grows if the dynamic one become longer.

Answer 4

Use Javascript/jQuery to find which box has the biggest height. Then set the same height to all the divs.

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var description = jQuery("div.description");
        var big =0;
        description.each(function(index, el) {
            if(jQuery(el).height() > big)
                big =jQuery(el).height(); //find the largest height
        });

        description.each(function(index, el) {
            jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs
        });
    });
</script>