title: Why does a semi-transparent background shine through in a different div
body: <p>I have a page with 3 elements. One in the center, with a nice background image; overlayed onto this, is a 2nd div which has a black semi-transparent background to better be able to read the text inside it.</p>
  
  <p>Aside from that, I also have a floating div with a completely white background.</p>
  
  <p>For some odd reason, when the float overlays the semi-transparent div, the semi-transparent backgound seems to bleed through into the float.</p>
  
  <p>My HTML + CSS to demonstrate my problem. If you make your browser window smaller, the right float will move towards the center div. It will properly stay red, except for the place where it hits the alpha-inset. </p>
  
  <p>Why??</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  #centerDiv {
     height: 300px;
     width: 900px;
     margin: 0px auto 0px auto;
     padding: 0 0;
     background-color: green;
  }
  #centerInset {
     width: 100%;
     background-color: rgba(0,0,0,0.3);
     position: relative;
     top: 225px;
     height: 74px;
     color: white;
  }
  #floater {
     float: right;
     width: 200px;
     height: 300px;
     border: 1px solid;
     clear: both;
     background-color: rgba(250,0,0,1);
     border: 1px solid black;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="floater"&gt;
     &lt;span&gt;some floating text&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="centerDiv"&gt;
     &lt;div id="centerInset"&gt;&lt;span&gt;Some random text&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>