CODEWITHSUNDEEP
javascriptjqueryhtmlcssresize
Rams10786
Rams10786

Reputation: 13

two divs side by side occupying entire container area and handling resizing events too

this is the code for two divs placed side by side such that on minimizing the first div the second should automatically occupy the remaining space. When the first div is brought back to original position, the second should automatically reduce its size.

One more constraint here is that, the sizes of the divs are not fixed by pixels, they are infact had to be mentioned as percentages. Can any one help in this regards?

<div id="parent" class="parent">
<div class="left"><button class="collapse-expand"></button></div>
 <div class="right">
    <!--<button class="collapse-expand"></button>-->
    </div>

Demo here: http://jsfiddle.net/rams10786/wrv8r91r/

Upvotes: 1

Views: 294

Answers (1)

David Gonz&#225;lez
David Gonz&#225;lez

Reputation: 455

I think I have acomplished what you want by not floating the right div and setting it to always 100%.

    .right{
        height: 100%;
        width: 100%;
        background-color: #67b168;
    }

Also I commented the size change in the jquery code:

    if($('.left').css("width")=='37px'){
         $('.left').animate({width:"20%"});
         // $('.right').animate({width: "80%"});
    }

This is the updated code: http://jsfiddle.net/jfpamqb7/1/

Upvotes: 3

Related Questions