Div overlapping & wrong height

Question

I have 3 DIVs. 2 are inside the parent DIV. something like

<div id="parent">    
    <div id=1>......</div>    
    <div id=2 style="position:relative;left:0px;top:-300px;">....</div>
</div>

As you can see, there is an overlapping. The annoying thing is, the parent div has a huge white space at the bottom. The reason apparently is because the parent div doesn't minus the overlapping.

Would you please tell me what I should do?

Answer 1

Change position:relative to position:absolute to remove the element from the flow of the page .

Answer 2

To expand on Andrew's answer a bit for clarity. If you use position:relative the space that element would take up on the page is preserved(the white space you are seeing) and then the element is moved.

With position:absolute, the space that element would have taken up is not used("removed from the flow of the page"). However, with position:absolute, the element will not be bound inside the parent div anymore either unless declaring the parent div with a position:relative;top:0;left:0; CSS declaration.

So you would want something like this:

<div id="parent" style="position:relative;top:0;left:0;">    
    <div id=1>......</div>    
    <div id=2 style="position:absolute;left:0px;top:-300px;">....</div>
</div>

I hope that helps to clarify a little bit. Still not sure if this will give you the exact look you are going for, but from a CSS rule perspective it is correct.