title: Why is width:100% relative to screen when within media query
body: <p>If I have want to have the following layout:</p>
  
  <pre><code>[----foo-----][[-bar1-][bar2]]
  </code></pre>
  
  <p>I.e. two columns each half the width, and then in the second column two sub-column with a 3/5 and 2/5 split, I do something like:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div id="left-section" class="half-width"&gt;
       Foo &lt;!-- lots of content --&gt;
    &lt;/div&gt;
    &lt;div id="right-section" class="half-width"&gt;
       &lt;div id="three-fifths-of-this-section" class="three-fifths-width"&gt;
            Bar1 &lt;!-- lots of content --&gt;
       &lt;/div&gt;
       &lt;div id="two-fifths-of-this-section" class="two-fifths-width"&gt;   
            Bar 2 &lt;!-- lots of content --&gt;
        &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>with the following CSS</p>
  
  <pre><code>div {
      display: inline-block;
  }
  
  @media screen and (min-width: 48em) {
    .half-width {
      width: 50%;
      *width: 49.9690%;
    }
  
  
    .three-fifths-width {
      width: 60%;
      *width: 59.969%
    }
  
    .two-fifths-width {
      width: 40%;
      *width: 39.9690%;
    }
  }
  </code></pre>
  
  <p>Why is the <code>three-fifths-width</code> class computed as 60% of the <strong>screen</strong> width (and <code>two-fifths-width</code> as 40% of the entire screen)? It's just a regular CSS <code>width</code> property which should be 60% (or 40%) of the <strong>parent</strong> element and so 30% (10% resp.) of the screen in practice.</p>
  
  <p>By the way I am actually using <a href="http://purecss.io" rel="nofollow">PureCSS</a> in practice but I'm interested in the underlying CSS.</p>
  
  <p>Also, I aware that the <code>min-width</code> within the <code>@media</code> query is always relative to the screen, I'm asking about a regular <code>width</code> or even <code>min-width</code> as a CSS rule within the scope of a <code>@media</code> query.</p>