3

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):

enter image description here

SexyBeast
  • 7,913
  • 28
  • 108
  • 196
  • The `.main` `div` is giving the correct height, but the body is giving a height of 0. – SexyBeast Aug 03 '12 at 13:23
  • Yeah, sorry, I didn't pay close enough attention to the question and thought the issue was with your outer `div` and not `body`. I do indeed see the same effect on the body element. – JAB Aug 03 '12 at 13:24
  • Exactly. How is it possible? – SexyBeast Aug 03 '12 at 13:26
  • 1
    http://www.cssnewbie.com/css-float-property/ "Floated elements exist outside the normal document flow". Basically, you don't have any elements in the document flow so there's nothing in the body element, I guess? Doesn't explain my observation in my comment on ajm's answer, though. – JAB Aug 03 '12 at 13:33
  • there is a lot of personal info on your screenshot. Just to let you know... – unludo Aug 03 '12 at 13:52
  • Well, none of them can cause harm, can they? Only the tab titles are visible. – SexyBeast Aug 03 '12 at 14:19

2 Answers2

4

In your CSS, div.clear - which you are using to attempt to clear your floats - is itself floated left. That means that it is not part of the document flow either and therefore cannot clear anything.

Removing float does the trick:

.clear { width: 400px; clear: both; position: relative; }

Alternately, if you want div.clear to be floated for some reason, there are a wide variety of other ways to clear your floats.

EDIT: div.main has a height of 520px because it is floated and floated elements "snap" to the dimensions of their children. If you floated body left (please don't; it's not a good idea), it too will "snap" to its children's dimensions and have a set height of 520px.

Community
  • 1
  • 1
ajm
  • 19,795
  • 3
  • 32
  • 37
  • Yeah sorry, the `clear` part was entirely redundant, I forgot to remove it from the Fiddle code. However this doesn't address my problem. – SexyBeast Aug 03 '12 at 13:25
  • Removing the `float: left;` bit from the `div.clear` rule list makes the body element have the right height when I do it. However, then removing `clear: both;` actually causes the problem _again_. So no, the `clear` is __not__ redundant. – JAB Aug 03 '12 at 13:30
  • What version of Firefox are you using? And have you checked using the built-in element inspector rather than just Firebug? – JAB Aug 03 '12 at 13:37
  • Does Firefox have a built-in inspector? – SexyBeast Aug 03 '12 at 13:41
  • 1
    Chrome dev tools: unchecking your `float` property in `div.clear`'s rule clears your floats, adds children that affect document flow to `body` and scales up `body`'s height. It's definitely your problem. – ajm Aug 03 '12 at 13:42
1

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/

Mark
  • 6,762
  • 1
  • 33
  • 50
  • Yeah, it does work? But how come? The `.clear` element is supposed to clear the floats above, in this case, it being outside the parent container itself, how can it make the body expand to cover the parent container? – SexyBeast Aug 03 '12 at 14:17
  • 1
    because it was inside the element that had no "dimension" due to float, once outside the floated element, and your body tag can calculate its height. – Mark Aug 04 '12 at 21:49