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

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.. ☺☻

2 comments:

Morten Ditmer5 January 2022 at 19:05
Thank you!
ReplyDelete
Replies
Anonymous20 April 2022 at 16:05
My Tactics: Parent Div Height Zero(0) Even Child Div Has Content >>>>> Download Now

>>>>> Download Full

My Tactics: Parent Div Height Zero(0) Even Child Div Has Content >>>>> Download LINK

>>>>> Download Now

My Tactics: Parent Div Height Zero(0) Even Child Div Has Content >>>>> Download Full

>>>>> Download LINK VI
ReplyDelete
Replies

Add comment