Relative div overlaps following divs 1

[dalchri]

Hello,

I've got the following:

<div id="div1" style="position:relative;"><!-- Map inside here with a few controls docked to the upper left, lower left, and upper right --></div>
<div id="div2"><!-- More content --></div>

As soon as I set div1 to relative positioning, div2 slips up to the top of and underneath div1. I was expecting div2 to remain below div1.

What did I do wrong?

 

[traingamer]

You are not giving us enough information. If div1 is relative, then div2 will follow it in the flow.

If, however, all of div1's contents are absolutely positioned within it, they are removed from the flow and div1 essentially has no content and div2 flows up to fill its space (or all of the space that is not positioned absolutely).

If that is what you are encountering, you may need to define a height for div1 so the browser knows how much space to reserve for it in the flow.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[dalchri]

That was it. I was expecting the absolutely positioned contents of div1 to increase its size. As soon as I sized it, everything was working as expected.