CODEWITHSUNDEEP
htmlcsscss-floatcss-position
NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5173

Body doesn't expand to include relatively positioned element

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

Upvotes: 3

Views: 1987

Answers (2)

Mark
Mark

Reputation: 6865

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/

Upvotes: 1

ajm
ajm

Reputation: 20105

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.

Upvotes: 4

Related Questions