title: Height of parent div is zero even if it has child with finite heights
body: <p>I have a website whose layout has been shown in the diagram. The body consists of a <code>main container</code>, which comprises of <code>header</code>, <code>parent div</code> and <code>footer</code>. The <code>parent div</code> further contains several <code>child div</code> as shown.</p>
  
  <p><img src="https://i.stack.imgur.com/OIjF6.png" alt="Webpage Layout"></p>
  
  <p>The problem being height of all the <code>child div</code> is finite. But the <code>parent div</code> contains nothing other than the child divs. All the child divs are visible but the height of the parent div is shown to be zero. I am also not fixing the height of the parent div by giving some pre-specified value as it may cause blunder if number of child increases in future.</p>
  
  <p>The problem due to zero size of parent div is that my footer div is going up and clashing with the contents of the parent div. This can be resolved by giving a suitable margin-top, but that is not a solution I am looking for. </p>
  
  <p>Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.</p>
  
  <p>Please comment if I am unclear in asking my doubt !</p>