title: Using em as measurment unit for width and height for elastic design
body: <p>I am trying to understand if (and how) you can use the <em>em measurement</em> for CSS properties that set the <em>width</em> and <em>height</em> of elements for an <em>elastic</em> design layout (width, height, min-width, min-height, max-width and max-height). The problem relates to the layout position of the main wrapper. I don't understand when, and how you should use the em measurement for width and height properties when designing my layout (not for sizing). If I, for example, want the width of the main wrapper to be 90 % of the body-element, how can I achieve that using em instead of %?</p>
  <p>I have searched Stack Overflow for similar questions, but the answers include things like responsive design, JavaScript and JQuery. I can only use HTML5 and CSS3. I have also tried to set the width and height using different values for em, but then main wrapper does not stay centered or exceeds the screen size.</p>
  <p>Here is a code snippet of what I have tried. The full code is available on <a href="https://jsfiddle.net/binaryglot/8dkn96g0/5" rel="nofollow noreferrer">JSFiddle</a></p>
  <pre><code>&lt;div id=&quot;page&quot;&gt;
      &lt;header&gt;
          &lt;nav&gt;&lt;/nav&gt;
      &lt;/header&gt;
      &lt;div id=&quot;content&quot;&gt;
          &lt;article&gt;&lt;/article&gt;
          &lt;article&gt;&lt;/article&gt;
      &lt;/div&gt;
      &lt;aside&gt;&lt;/aside&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;
  
  
  #page {
      position: relative;
      width: 90em;
      height: 90em;
      top: 1em;
      right: 1em;
      bottom: 1em;
      left: 1em;
  }
  </code></pre>
  <p>The code above makes the main wrapper exceed the screen size, both vertically and horizontally. I want the results to equal that of using 90 % instead of 90em for width and height.</p>