Parent Div Does Not Adjust Height When Adding Div Dynamically

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 th

Solution 1:

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/

Solution 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.

Solution 3:

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

Solution 4:

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.

Solution 5:

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