Parent Div does not adjust height when adding div dynamically

Question

I am adding divs dynamically as shown in http://jsfiddle.net/Lijo/ZkLg6/5/.

The parent #mainHolder div is not increasing its width when child elements are added – as a result the children breaks the parent div. How can we overcome this by adjusting the parent div height?

enter image description here

jQuery

$('input').click(function()
{
 var existingDirectChildrenDivCount = $('#mainHolder > div').size();



 if( existingDirectChildrenDivCount % 3 == 0)
 {
      $('#mainHolder').append ("<div class='firstDiv'> A  </div>")
 }

 if( existingDirectChildrenDivCount % 3 == 1)
 {
      $('#mainHolder').append ("<div class='secondDiv'> B </div>")
 }

 if( existingDirectChildrenDivCount % 3 == 2)
 {
      $('#mainHolder').append ("<div class='thirdDiv'> C  </div>")
 }

}
);

HTML

<html>

   <input type="submit" value="Add" />
   <br/>   
   <div id="mainHolder">
   S    
  </div>

  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>

</html>

CSS

#mainHolder
{
    width: 400px;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:auto;
}

.firstDiv
{
    float: left;
    display: inline;
    background-color: #f5B5f5;
    height:100px;
}

.secondDiv
{
    float: left;
    display: inline;
    background-color: #FF007F;
    height:100px;
}

.thirdDiv
{
    float: left;
    display: inline;
    background-color: Pink;
    height:100px;
}

score 20 · Accepted Answer · answered Sep 17 '12 at 10:41

20

Add overflow:auto

#mainHolder
{
    width: 400px;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:auto; overflow:auto
}

Demo here http://jsfiddle.net/ZkLg6/11/

answered Sep 17 '12 at 10:41

Sowmya

26,684
21
96
136

2

+1 for your nice answer we can give overflow:hidden; because its supports Mac computer's also overflow:auto; doesnt support. – Shailender Arora Sep 17 '12 at 10:46
yes @Sowymya i was just expressing my views for overflow:hidden; :-) – Shailender Arora Sep 17 '12 at 11:15

score 2 · Answer 2 · answered Sep 17 '12 at 10:43

2

Try this: http://jsfiddle.net/ZkLg6/7/

The fix is to use a div that clears floated elements. I had to push your dynamic elements into a nested div inside mainHolder to ensure the clear div was always below them but it works well.

answered Sep 17 '12 at 10:43

Michael Allen

5,712
3
38
63

score 1 · Answer 3 · answered Sep 17 '12 at 10:43

1

Try to add overflow: auto; to the CSS of #mainHolder.

answered Sep 17 '12 at 10:43

Sebass van Boxel

2,514
1
22
37

score 1 · Answer 4 · answered Sep 17 '12 at 10:43

1

The solution is to add a at the end of your #mainHolder and insert elements before that (or just keep removing and re-adding it every time you add a new div. This is because you're using floats, alternatively if you can drop the float from the other divs everything should work as expected. The overflow: auto; solution is also good and seems simpler.

answered Sep 17 '12 at 10:43

xception

4,241
1
17
27

Perfect! Thank you! – Aline Matos Nov 14 '17 at 00:26

score 0 · Answer 5 · answered Sep 17 '12 at 10:44

Try something like this:

#mainHolder
{
    min-width: 400px;
    float:left;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:20px;
}

The only problem here is letter "S",but you may put it inside some div. Like those colored. Here is updated JS fiddle.

Hm. But that works if you want to increase WIDTH, not HEIGHT. If you want to increase height - just add overflow:hidden; Plus there are some more changes in your css. Take a look at JSfiddle

score 0 · Answer 6 · answered Sep 17 '12 at 10:47

You have to clear the floating. You can do that inserting an element like br which has clear:both.

Here is a piece of code you can add in order to work:

$('#mainHolder').find("br").remove(); // remove already added br
$("<br>").css({clear : "both"}).appendTo($('#mainHolder')); // append a br after the last element.

I've updated your jsFiddle: http://jsfiddle.net/ZkLg6/13/

score 0 · Answer 7 · answered Sep 17 '12 at 10:50

0

Check this http://jsfiddle.net/ZkLg6/19/
I used overflow:hidden

#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto; overflow:hidden;
}

answered Sep 17 '12 at 10:50

Prasad Jadhav

5,090
16
62
80

score -1 · Answer 8 · edited Nov 01 '13 at 22:35

-1

Set both overflow and height to auto, and now the parent div's offsetHeight will update dynamically!

edited Nov 01 '13 at 22:35

Josh Crozier

233,099
56
391
304

answered Oct 24 '13 at 14:45

Hank

1,658
12
13

Parent Div does not adjust height when adding div dynamically

8 Answers8

Linked