how to hide parent div, keeping inner div visible?

Question

Below is a simplified version of my problem. Considering the following piece of HTML:

<div id="div1" style="display:none">  
  text i do not want  
  <div id="div2" style="display:block">  
    text i want to keep  
  </div>  
</div>

But of course, "text i want to keep" will not be displayed because the parent div is not visible.

Question: How do you only dispaly the content of the inner div?

Due to the widget blogger uses, I have no access to the code and need to clear the outer div with some CSS. I have already ruled out font-size: 0; after reading this. Messing with negative margins too is ruled out, due to position of elements.

Answer 1

try this:

color: transparent;
background: transparent;

of course, that won't actually make the text non-selectable, just non-visible.

Really what you're trying to do is sort of against the box-model concept, and it'd be better if you were able to enclose the text you didn't want to see in a separate div of equal level to the one you do want to see, and then hide that other div, i.e.

<div id="div1">  
  <div id="div3" style="display:none">text i do not want</div>
  <div id="div2" style="display:block">  
    text i want to keep  
  </div>  
</div>

Answer 2

Enclose the 'Text I do not want' in another DIV or SPAN with display:none style.

Answer 3

Due to the hierarchical nature of HTML, this is a hard nut to crack. The common solution is to move one element out of the other and style them so that they appear to be nested, but I assume you cannot do that in this case.

The only solution I can think of that will nullify the parent element while keeping the child element is absolute positioning, but that will be hard if you've got dynamic heights/widths on the elements.

But try this:

#div1 {
    /* You might want to set a height here appropriate for #div2 */
    position: relative;
    text-indent: -10000px;
}

#div2 {
    left: 0;
    position: absolute;
    text-indent: 0;
    top: 0;
}

Answer 4

Do you want just the text to disappear or the space that the text takes up to collapse too?

If you just want the text to disappear, use

<div id="div1" style="text-indent:-9999px;">
   text i do not want
   <div id="div2" style="text-indent:0">
     text i want to keep
   </div>
</div>