title: filling a div with another div
body: <p>I am making a website, which is made up of a bunch of panels. These panels all have a repeating texture, but to make the site look better, I decided to tint the images using colored divs and opacity. I'd rather not use more pictures, so please do not suggest I just recolor the image.</p>
  
  <p>My problem is, that when I put the text into the tint div, the font inherits the opacity, and ends up grey instead of white, but when I put it outside the tint div, I loose the tint.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tint {
    display: block;
    position: static;
    height: 100%;
    width: 100%;
    line-height: 100%;
    opacity: 0.4;
    z-index: -1;
    filter: alpha(opacity=40);
    /* For IE8 and earlier */
  }
  .ExpDiv {
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
    border: solid 3px;
    -webkit-transition: all .5s ease-in-out 0.2s;
    -moz-transition: all .5s ease-in-out 0.2s;
    -ms-transition: all .5s ease-in-out 0.2s;
    -o-transition: all .5s ease-in-out 0.2s;
    transition: all .5s ease-in-out 0.2s;
    background-color: #99ccff;
    min-width: 7px;
    min-height: 9px;
    max-width: 150px;
    max-height: 200px;
    overflow: hidden;
    background-image: url(striped_linenen.png);
    background-repeat: repeat;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ExpDiv" style="float:left;"&gt;
    &lt;div class="tint" style="background: #99CCFF; "&gt;
      Content For these Divs will be inserted by the Owner...
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="divider"&gt;
    &lt;br /&gt;
  &lt;/div&gt;
  &lt;div class="ExpDiv" style="float:left;"&gt;
    &lt;div class="tint" style="background: #996699; "&gt;&lt;/div&gt;
    Content For these Divs will be inserted by the Owner...
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>