How to cover a div

Question

Let's say we have a div as follow:

<div class="post">Variable text</div>

The text can be any longer. So it could be 3 characters, 150 or 300. The div has a border of border: 1 px solid black over a background: white. Is there any way to create another div (with position relative or absolute i guess) that completely covers this div so that the text is unreadable?

Answer 1

<div class="post" style="position:relative">
     Variable text
     <div style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:white"></div>
</div>

Something like that could work, you may have to play with the z-index to make sure your white box is on top. Basically, that inner div starts at the top left corner of the outer div and is the same size as it.

Answer 2

CSS:

.outer { 
  position:relative;
  z-index:10;
}
.inner {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:20;
 }

CSS (image replacement):

.outer { 
  text-indent:-9999em;
  height:0;
  padding:100px 0 0 0;
  width:100px;
  background-image:url(100x100.jpg);
}

HTML:

<div class="outer">
  <div class="inner"></div>
  Text to Replace
</div>

Answer 3

What are you trying to achieve? Any reasons you need another div?

If you're just trying to hide the data why don't you just:

<div class="post" style="background-color:black;">Variable text</div>

And ensure your text is also 'black'