When container DIV collapses having multiple child DIV inside it. Here you will get a case study when container DIV has two child divs side by side they appears inside container DIV. Child DIVs are absolutely positioned inside a container DIV which is relatively positioned. Also know how to recover from the problem.
This is a case study and know how to recover from it.
The raw HTML is given below-
<div id="container">
<div id="leftCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
</div>
<div id="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
The CSS given below-
#container
{
position: relative;
margin:0 auto;/* centers the container */
width: 1000px; /* define a width so it dont take whole width */
background: #C63;
padding: 10px;
height:auto; /* takes the height of its content */
}
#leftCol
{
position: absolute;
top:10px;
left:10px;
background: #e8f6fe;
width: 60%;
}
#rightCol
{
position: absolute;
top:10px;
right :10px;
background: #aafed6;
width: 30%;
}
.box
{
position:relative;
clear:both;
background:#F39;
}
You will see that the container DIV collapses: Why ?
This is because the INNER CHILD divs have some implicit height which is obtained by its content. But they are absolutely positioned.
So they just comeout from the document flow and so the container don’t get their implicit height so the container shrinks.