Flexible Div Example

Attempt to make div's fill the parent container. Assign weight to them DIVs so those with more weight get assigned more space,.

HTML

<div id="container">
    <div class="horizontal list" weight=1>Here is an item in the list with W=1</div>
    <div class="horizontal list" weight=2>Here is an item in the list with W=2</div>
    <div class="horizontal list" weight=1>Here is an item in the list with W=1</div>
    <div class="horizontal list" weight=3>Here is an item in the list with W=3</div>
    <div class="horizontal list" weight=4>Here is an item in the list with W=4</div>
</div>
<div id="controls">
    <input type="button" id="fill" value="Fill the list up based on weight">
</div>

CSS

#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 30em;
  height: 40em;
  background-color: rgba(35,30,30,100);
  overflow: hidden;
}
div.horizontal {
  margin: 0.5em;
  width: 92%;
  height: 2em;
  border-radius: 0.5em;
  padding-left: 1em;
  background-color: rgba(200,80,30,90);
  float: top;
  line-height: 2em;
  overflow: hidden;
}

div.vertical {
  width: 4em;
  margin: 0.5em;
  height: 90%;
  background-color: lightgreen;
  float: left;
  overflow: hidden;    
}

#controls {
  width: 20em;
  height: 10em;
  padding: 2em;
  text-align: center;
  float: right;    
}

#fill {
  padding: 1em;
  margin: 2em;
}

JavaScript

$(document).ready(function(e) {
    fill = function() {
        //Loop through all elements once to get total weight
        var totalWeight = 0;
        var totalHeight = $("#container").height() - 15; //need a little extra empty space at the buttom
        $(".list").each(function(i) {
          totalWeight += parseInt($(this).attr('weight'));
          totalHeight -= parseInt($(this).css('margin'));
        });
        
        //Loop though the element a second time to set the relative height
        $(".list").each(function(i) {
           var element = $(this);
           element.css("height", (element.attr("weight") / totalWeight) * totalHeight);
        });
    }
    $('#fill').click(fill);
});