I am trying to design a relatively positioned div, which in turn would consist two divs. None of the child divs have a fixed height, but they vary with the content, so the parent div expands with the taller of the child div. Now the design works fine, but when I was analyzing the code with Firebug, I saw that on hovering over the body tag in Firebug, only a short portion of the entire screen at the very top showed as the body. The side-panel confirmed it, the width of the body is ok, but the height is 0. That means the height of the parent div is 0, but Firebug tells me it is not, it is some 560px. How is it possible? I know elements don’t expand with their content if the content is absolutely positioned, but here the child divs are relatively positioned, so why doesn’t the parent expand with its contents? The fiddle is at http://jsfiddle.net/Cupidvogel/y79NS/6/. Th screenshot (please zoom to understand my point! It is when I try the code as a complete HTML page in Firefox):
What here happens is normal browser behavior, you float divs, so there are not in the ‘normal’ flow anymore because of the float property.
So body is height 0, because body can not calculate height of elements that ‘not in there’.
Move you div class=”clear” out of the div class=”main” and remove the float property aswell on the div class=”clear”, problem solved.
view: http://jsfiddle.net/y79NS/8/