title: Make inner div 100% width of body
body: <p>I want the child <code>div</code> width to be 100% of the body.</p>
  
  <p>CSS</p>
  
  <pre><code>#container {
      position:relative;
      width:400px;
      height:100px;
      margin:0 auto;
      background:red;
  }
  #inner {
      width:100%;
      height:30px;
      background:blue;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/45thwhkj/1/" rel="nofollow">Here is the fiddle</a></p>
  
  <p>I'm using <code>position:relative</code> for parent <code>div</code> and the <code>position:absolute;</code> solution is not working. How can I do this? Js solutions are acceptable.</p>