Question

I am designing a three column website and I want on the left column, the information of some specific persons to be displayed with their profile photo. For mean time, I am taking it in HTML, and I have designed successfully the code for left column.
Now I am trying to make a sub-division in the left column, each division reflecting the photo of the person with the name and account information.

#column_left{
   display: inline;
  float: left;
  margin-left: 5px;
}
 #col1 #sub-div{
  width:100%;
  margin:auto;
  border-top:1px #333 solid;
  border-bottom:1px #333 solid;
}
 #col1 #sub-div #div-img { float:left; display:inline; width: 40px; height: 40px;
   } 
 #col1 #sub-div #div-info { float:left; display:inline; width:auto; height:auto; padding: 2px; }

Now problem is that even the two divs (div-img and div-info) are under sub-div, so height of sub-div must change according to the height of its child divs. But unfortunately, child divs are aligned in the right order but parent div does not have any height unless in mention it in the css code of #sub-div.

Could anyone tell me why is the parent not inheriting the height of the child element?
am I wrong somewhere?

Answer 1

You need to clear your floats. Add this line to the bottom of your left div to see what I mean:

<div style="clear: both"></div>

To learn more about why floats need clearing, see this article. The answers to this question offers more clearing solutions.