CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Caffeine addicted
Caffeine addicted

Reputation: 324

Adjust Width of Dynamically added Divs

![enter image description here][1]![My Image][2]

HTML

<div id ="data">
  <div>DIV1</div>
</div>

Jquery

$(function(){
  $("#button").click(function(){
    $("#Data").append('<div id="mySecondDiv"></div>');
  });
});

As you can See on the Image... I have one button that is adding the Divs to my Div id ="data". I just want that by default I have only one div , whose width is 100% at start, and now when I click the button it will add another and now the width of both divs will be adjusted automatically to 50%, and the functionality is goes so on

How can I achieve the adjustment of the width of the Divs?

enter image description here

Upvotes: 3

Views: 92

Answers (2)

DaniP
DaniP

Reputation: 38262

With CSS you can use this properties:

#data {
    width:100%;
    display:table;
}
#data > div {
    display:table-cell;
    width:1%;
}

Check this Demo Fiddle

Upvotes: 3

H&#233;ctor
H&#233;ctor

Reputation: 509

Try with this jquery:

$(function(){
var i = 1;
    $("#button").click(function(){
        percent = ((1/i)*100) + '%';
        $("#Data").append('<div class="hello" style="width:'+ percent +'"></div>');
        $('.hello').css('width',percent);
        i++;
    });
});

Upvotes: 0

Related Questions