Hide empty div in i.e

[Jo6891]

Hi there

I have a div which may / may not contain content. When the div does not contain content, I would like it to disappear.

Firefox seems to have a grasp on this, however IE still displays the div. I have tried adding any empty comment, and whilst the div is not displaying, the area where it used to be still exists and other content is wrapping around it, which is not what I want, I would like it to completely disappear.

Does anyone know how to achieve this?

Thanks in advance

[kaafmim]

There are a lot of possible ways my friend. Put your code here, that way we may be able to help!

But a universal solution is

<script type="text/javascript">
if(document.getElementById("your_div_name").innerHTML=="") {document.getElementById("your_div_name").style.display="none";}
</script>

This removes the empty div, but there can be a lot of better ways, specially if you can use php. The problem of this solution is that it needs a little playing, you should make sure that the div contents when empty are absolutely nothing, and also it needs javascript to be enabled.

[Jo6891]

Hi there,

Thankyou for your reply. Do you know if there is a way to do this in pure CSS, i.e no javascript or PHP?

Thank you again

[kaafmim]

You are welcome. No, I don't think that there can be a pure CSS solution, as CSS is not content related. You need something to be dynamic, CSS is static.

[Jo6891]

Darn it!I hate IE - it works perfectly in FF. Really no hack or anything?

[kaafmim]

Would you please tell me what did you do for Firefox? Well, as I know, this should be a non-standard solution. I would appreciate if you send your FF solution.

[Jo6891]

Hi there,

Thank you for replying once again.

It's not a solution, it's literally just an empty div eg:

<div class="header"></div>

This works in FF Chrome and Safari but not IE.

[mordauk]

Post your css rules, then maybe we can help you out a little more.

[cbVision]

.header {display: none;}

[Jo6891]

Hi cbVision

Thanks for your reply. I actually do not need to hide the div all the time - only when it is empty.

I currently have no css rules to enforce Firefox to hide an empty div - the only css I have defines bg color and width.

[mordauk]

The reason it's not showing up in Firefox then is because there is no height declared, and is thus appearing to be "invisible". What is actually happening is that the div, because it's empty, has a height of 0px, so cannot be seen, but it is still there.

[Jo6891]

OK thank you for explaining that mordauk!

So I guess the only way to make it dynamically 'disappear' if it contains no content is to use javascript and this is not achievable in the css?

[mordauk]

Correct.

[Jo6891]

Thanks everyone for your advice so far.

I am currently trying to use the code as first given

<script type="text/javascript">
if(document.getElementById("c1").innerHTML=="") {document.getElementById("c1").style.display="hidden";}
</script>

However it doesn't hide my div with the structure I have:

I have a wrapper with a display:table
I have an inner wrapper with dispay:table-row
I have wrapper within that with display:table-cell
and within this I have 3 x columns.

(See example here for why I have created this layout - http://www.projectseven.com/tutorials/css/3-column-flex-display/)

If I set the CSS to column 1 to display:none; the column disappear and column 2 stretches to fill it's place. Likewise if I apply the css to column3. However this isn't working when I want to dynamically hide it using the javascript above. Is the javascript above not compatible with the structure I have. Is there a way to achieve this using .net or php?

Thank you once again for your advice