Menu
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?
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;
}
824
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents. As you are floating all elents in row it has 0 height and therfore so has .
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/
84
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
