title: What CSS is neccessary to create inner panel on 100% width div
body: <p>I'm trying to create a semi-transparent background to lessen the interaction of the text with a textured background by using a semi-transparent div.  I can't seem to figure out how to write the CSS to achieve this effect when the parent div's dimentions are defined by a pixel value height and 100% width.</p>
  
  <p>Apparently I can't use margin to "shrink" the div when the height and width are defined as 100%.  This is only a small section of the webpage so I'd like to avoid changing the entire layout to achieve this one effect.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="innerPanel"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html {
      height:100%;
      background-color:black;
  }
  #container {
      width:100%;
      height:250px;
      background-color:#0183e5;
  }
  #innerPanel {
      width:100%;
      height:100%;
      margin:15px;
      background-color:rgba(255, 255, 255, .5);
      border-radius:10px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rhewitt/qpYFV/1/" rel="nofollow noreferrer">http://jsfiddle.net/rhewitt/qpYFV/1/</a></p>
  
  <p><img src="https://i.stack.imgur.com/PcVBR.png" alt="Example output"></p>