CODEWITHSUNDEEP
htmlcss
NibblyPig
NibblyPig

Reputation: 52952

How do I stop a div taking up space?

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!

Upvotes: 23

Views: 62705

Answers (6)

Eugene Ryabtsev
Eugene Ryabtsev

Reputation: 2301

I know this is an old thread, but now that we have position:sticky; and want to play nice with it, one way to do it is to set height:0; overflow:visible;

Upvotes: 4

Dan Baker
Dan Baker

Reputation: 1827

I know this has been answered, but if you are using bootstrap try:

class='hide'

instead of 

class='hidden'

Upvotes: -1

enguerran
enguerran

Reputation: 3291

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

[EDIT]

After reading w3fools, even if they do not collected any mistake about pr_class_visibility, they do about pr_class_display: so never see w3schools

But you can see reference.sitepoint.com :

Descendant boxes of a hidden box will be visible if their visibility is set to visible, whereas descendants of an element for which display is set to none can never generate boxes of their own.

Upvotes: 3

Sampson
Sampson

Reputation: 268462

"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.</p>
  </div>
</div>

Upvotes: 56

&#211;lafur Waage
&#211;lafur Waage

Reputation: 70011

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;

Upvotes: 2

Rich
Rich

Reputation: 36856

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.

Upvotes: 5

Related Questions