Question

I have controls in a webpage within a div, my requirement is to arrange the controls according to div height i.e., when there is a change in div height the controls should rearrange according to height

this sounds simple but any help is greatly appreciated

<div class="messagepop pop" id="firstpop" style="width: 250px; display: block;border:4px solid #aaa">
<a class="search-choice-close" onclick="closeRsltDiv('contact','firstpop')"     href="javascript:void(0)" style="float:right;font-weight:900;">X</a>
<div id="div_result_holder" class="chzn-container chzn-container-multi chzn-container- active" style="height:100px;width:248px;overflow-y:scroll;border:2px solid #aaa">
<ul id="merch_drp_div_ul" class="chzn-choices"></ul>
</div>
<br>
<input type="button" class="btn" value="Clear All" onclick="clearSelected('merch_drp')">
</div>
<br/><br/><br/>
<input type="button" id="btnid" class="btn" value="Change Size" onclick="changeSize('firstpop')">


$('#btnid').click(function(){
    //alert("hai");
    var somediv = document.getElementById("firstpop");
    somediv.style.height = "500px";
});

Answer 1

Try dynamically resizing the innerdiv by an 80% height value as well.

JsFiddle: http://jsfiddle.net/pakuP/4/