Remove an Element with a Relative Position from the Normal Flow of a Web Page

Here is a nifty little trick I found on a post from StackOverflow. I usually prefer to “relatively” position elements in my pages so that I can have a more fluid designs. However relatively positioned elements are not taken out of the normal flow of the document and so often I am left with a big ugly blank space where they would normally be found. This can lead to all sorts of issues especially when you try and relatively position every element thereafter to cover the ever growing blank spaces. Here is a novel solution that will create a 0 height 0 width pseudo-relative element to wrap around a absolutely positioned element to give you a relative reference point that will not leave that dreaded big blank space.

<div style=”position: relative; width: 0; height: 0″>
<div style=”position: absolute; left: 100px; top: 100px”>
Hi there, I’m 100px offset from where I ought to be, from the top and left.
</div>
</div>

Taken From: http://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space-in-document-flow

Comments are closed.