0

I have two div box Left and right... I need flexible listing height in right div box as left box content are not fixed...Means if i add some contents in 'left div box'.. then 'right div box' autoflow content box height should be adjust accordingly

Here is a link

/css/

.dvleft{float:left;} .dvright{float:right}.dv100per{width:100%;float:left}
.grey_bg2{padding: 5px 0px 8px 7px;background-color:#F7F7F7;color:#000; font-size:13px}
.mTop5{margin-top:5px;}.mTop10{margin-top:10px}.mTop20{margin-top:20px}.mleft15{margin-left:15px;}
    .contactlist{background-color:#FFF;float:left;width:100%;padding: 5px 0px 10px 0px;height:239px;overflow:auto}
    .sharecon{float:left;width:100%; border-bottom:solid 1px #e6e6e6; padding:3px 0 6px 0}

/HTML/

<div class="dvright grey_bg2 mTop20" style="width: 365px; padding: 7px 8px 10px 8px;">
    <div class="dv100per">
        <span class="dvleft">
            <strong>Right Box</strong>
        </span>
    </div>

        <div class="contactlist">
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">[email protected]</span>

            </div><!--sharecon-->
        </div><!--contactlist-->

</div><!--Right Block Ends Here--->

</div>
2
  • Please elaborate your question. Dec 14, 2012 at 6:21
  • I need to adjust the right div's height as i insert more content in left div box...Please check the given link of jsfiddle...
    – Gaurav
    Dec 14, 2012 at 6:35

2 Answers 2

0

If you are a using j Query then try this,

$(function(){
    var leftDivHeight = $('.dvleft').height();
    var rightDivHeight = $('.dvright').css({height: leftDivHeight});
});
0
0

you can use jquery equalizeCols plugin

2
  • will not work in my case.. because i want to adjust the height for Overflow content...:(
    – Gaurav
    Dec 14, 2012 at 7:03
  • Can we use jquery " $('.elements').height(Math.max($('#div1').height(), $('#div2').height()));" here...??? if yes.. please some prodive the example...:)
    – Gaurav
    Dec 14, 2012 at 7:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.