Div Overlapping & Wrong Height

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

......

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.

Solution 2:

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

Share