Home/ Questions/Q 8546767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:06:39+00:00

I am adding divs dynamically as shown in http://jsfiddle.net/Lijo/ZkLg6/5/ . The parent #mainHolder div

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0