My Tactics: March 2014

26 March 2014

Parent Div height zero(0) even child div has content

Hi,

Let see what happened when we float the child div to Left or Right. Parent Div shows the height as 0.

<html>
  <head>
    <style>
      #parent
      {
        width:100%;
        height:auto;
      }
      #child
      {
        float:right;
        width:25%;
        height:auto;
        border:1px solid black;
        margin:10px;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
        this is the content inside the child
      </div>
    </div>
  </body>
</html>

It shows the result as -

Notice child div has content so it has the height but if child div has the height why parent div showing height as zero(0)??

Its because of you set the
float:right;
on child div which make it position:absolute and thats why parent div height is zero. To correct is you just need to set the overflow:hidden on parent div.

modified the css part as below -

      #parent
      {
        width:100%;
        height:auto;
        overflow:hidden;
      }

And you are good to go you will get the correct result as -

Happy Blogging and Sharing.. ☺☻