How to collapse an empty div?

Question

I have a div that I want to use for dynamic content. When the content filling the div does not exist, I do not want to see it. Right now, I can see a box of 5 pixels. Even when I remove the pad, I still see about 1 pixel of the box. How to delete a field when there is no content?

#test { border:1px dashed red; font-size:16px; margin:20px 0 0 0; width:332px; background-color:#eee; padding:5px 0 5px 60px; } 

Answer 1

Because there is a div. You should do this using a server side programming language (or maybe javascript). For instance:

 if(content()) // if there is any content { echo "<div id=\"test\"></div>"; } else { } 

Answer 2

You can do in CSS:

  div#test:empty { display: none; } 

Answer 3

If you remove padding , margin and border (which you did not mention in your question), the height will be 0px and you will not see anything in the browser. Check out the screenshot below and the offsetHeight value.

For example, you can create another div below #test , and then add display:none for #test , you will see that the position of the second div does not change.

Answer 4

There is also a jquery way to do this if you're interested. The : empty selector can hide things like this:

 $('#test:empty').hide(); 

Answer 5

How about using the search box in the upper right?

Hide an empty div will point you to the same questions that have been answered.