Show div with parent display:none [duplicate]

Question

Possible Duplicate:
Display HTML child element when parent element is display:none

I have a div inside a another div. I have set the outer div to display:none this will make the inner div hide as well. How can I show the inner div and have the outer one set to display none?

CSS:

.hidden {
    width:100px;
    height:100px;
    background-color:red;
    display:none;
}

.display {
    width:50px;
    height:50px;
    background-color: yellow;
    display:block;
}

HTML:

<div class="hidden">
    <div class="display"></div>
</div>

Example: http://jsfiddle.net/gcyhz/1/

Answer 1

The simplest alternative to implement this, would be to avoid using display: none and use the transparent colour:

.hidden {
    width:100px;
    height:100px;
    color: transparent;
    background-color: transparent;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    display:block;
}

JS Fiddle demo.

There's also the option of using visibility instead of display: none:

.hidden {
    width:100px;
    height:100px;
    visibility: hidden;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    visibility: visible;
}

JS Fiddle demo.

This does, however, cause the visibility: hidden element to take up its allocated space in the DOM, but leaving it apparently-vacant (so it still has physical dimensions, it's just not visible on the page), though the child element can override that property by declaring visibility: visible.

In all honesty the latter suggestion is, effectively, exactly the same as the first, it just avoids problems that some browsers might have with transparent as a color (I can't remember which browser had this problem, but I seem to recall it being an older IE, but I can't reference any document to corroborate that recollection).

Unfortunately the display: none declaration on a parent cannot be overridden on a child element, and, incidentally, neither can opacity.

The easiest solution, as noted, is to simply move the element out of its parent, and avoid the inheritance problem rather than trying to compensate for it.

Answer 2

Unfortunately, this is not possible. You'll have to design an alternate solution. (Perhaps move the inner div out of the hidden div when you need to display it?)