Spacing Problem

Question

I have a div with margin and padding in it. And I want to hide the content inside the div. I am using js to show, hide process. The problem is when I tried to hide the content, it gets hide but the spacing or the gap remains the same. Firefox renders properly, but not in ie. How can I solve this issue in ie using css?

Answer 1

You can use nested divs, place the padding and margins you do not want to hide in the parent div and the padding and margin you do want to hide in the child div and only hide the child div with your javascript.

Answer 2

If you remove the content from a div, it may be hidden completely with margins and paddings in some brwosers but stay visible with both margins and padding in the others.

You can try just applying the display style to the div:

<div style="display:none;">
    text...
</div>

and it will be away completely.

Answer 3

Try removing the content and setting the container's padding to 0.

Alternatively, to keep things a little tidier; remove the margin from the container div, add a wrapper div with the same margin value but as a padding attribute, and simply show / hide the container div.

CSS

#wrapper, #container{
    padding:1em;
}

---

HTML

<div id="wrapper">
    <div id="container">This is the content that will be hidden</div>
</div>

Answer 4

I may be reading your question wrong, but I'm assuming that, since the "spacing and gap remain (sic) the same," you're using

#style {visibility: hidden; }

If you use

#style {display: none; }

and whatever has the id of style will be removed from the document entirely, rather than simply hidden from sight.