How do I stop a div taking up space?

Question

I am doing stuff with ajax progress bars and stuff...

Basically I have a hidden div that says "Loading" in it, and beneath it I have a visible div with my content in.

When it is loading, it fades the content div out, makes the hidden div visible, and moves it via javascript/relative positioning to be in the middle of the content.

It looks quite badass but unfortunately when the div is made visible, even though its relatively positioned, it takes up a line so my content moves down.

Do you know how I can stop it from taking up space when it is made visible?

Edit: Someone removed the tag it seems

The loading div starts off display none, so it takes up no space, and then when it is made visible, it starts taking up space, even though it is positioned relatively.

I could use visible and non-visible, but then it would force my content window down all of the time.

It looks like absolute positioning is the way to go.

What I want to do is combine absolute and relative positioning. I am trying to get the absolute coordinates of the content div and setting its location that way, but without success yet.

Edit: I just re-read your answer and you have done exactly that. Thank you!

Answer 1

"Do you know how I can stop it from taking up space when it is made visible?"

Position it absolutely.

div#theParent { position:relative; height:200px; width:640px;
                top:50px; left:50px; }
div#theChild  { position:absolute; height:100px; width:400px; 
                top:50px; left:120px; }

<div id="theParent">
  <div id="theChild">
    <p>This div is absolutely positioned to a relatively-positioned parent.
  </div>
</div>

Answer 2

When you want to make it invisible, make it really invisible with style="display:none". There are many ways to do this...not sure how you have this set up or how you're altering your dom elements. Provide some more context (doing this with Ajax controls, custom JavaScript, a library like jQuery, etc), and we can give you a more specific solution.

Answer 3

You can try various things, like. Depends on how your code is constructed. Since you didn't provide an example :)

display: none;
height:0px 
line-height: 0px;
font-size: 0px;

Answer 4

You have to play with the display option, not the visible option :

Tip: Even invisible elements takes up space on the page. Use the "display" property to create invisible elements that do not take up space!

see w3schools