I know that I can hide an element without removing the space it would occupy by using visibility: hidden. What I want to do is the exact opposite: I want to render the rest of the page as if the element wasn’t on the page, but keep the element visible.
The reason I’m asking is because I have a centered 950px-wide layout to which I want to add a little box on the left side of the screen. It would look kinda like this:
Right now I have a <div> that holds the side box as the top element in my 950px page wrapper, which is also a <div>. To the side box I’ve applied position: relative and left: -200px (box width) to move it to the side, but that still leaves me with the main content being pushed down. Am I approaching the problem correctly? Is there a logical way to remove the vertical space that was left behind by the side box?
Just use
position: absolute;. The element will no longer be part of the document flow, and you can position it relative to its closest non-statically positioned ancestor.