Show Child Div within Hidden Parent Div

Solution 1:

Set the parent class's visibility to hidden or collapse. Set the child to visible. Something like this:

.parent>.child
{
    visibility: visible;
}

.parent
{
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

Full example: http://jsfiddle.net/pread13/h955D/153/

Edited with help from @n1kkou

Solution 2:

I don't think it's possible.

You can use JavaScript to pull the element out, or duplicate it and then show it.

In jQuery you could copy an element.

var element = jQuery('.Inner-Div').clone();

And then append to any visible element that might be appropriate.

element.appendTo('some element');

Solution 3:

Agreed, not possible with display:none. Here's a different solution that will hide parent and show child - however, the height of the parent will not be collapsed.

.Main-Div {
    position: relative;
    left: -9999px;
}

.Inner-Div {
    position: relative;
    left: 9999px;
}

Example: http://jsfiddle.net/luke_charde/jMYF7/