title: DIV half of proper size
body: <p>I have a series of stacked <code>&lt;div&gt;</code> tags. They are all supposed to be the same size—half of the window; however, only the first in the series is the correct size.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.left {
      padding: 5% 10%;
      height: 100%;
      background-color: #364d9d;
      position: absolute;
  }
  .right {
      padding: 5% 10%;
      right: 0;
      height: 100%;
      background-color: #2f463d;
      position: absolute;
  }
  #yes {
      z-index: 6;
  }
  #no {
      z-index: 5;
  }
  #violence {
      z-index: 4;
  }
  #peace {
      z-index: 3;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="left" id="yes"&gt;
      &lt;p&gt;Yes&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="right" id="no"&gt;
      &lt;p&gt;No&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="left" id="violence"&gt;
      &lt;p&gt;Violence&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="right" id="peace"&gt;
      &lt;p&gt;Peace&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/djo2L8mn/6/" rel="nofollow">JSFiddle</a></p>
  
  <p><a href="https://jsfiddle.net/djo2L8mn/8/" rel="nofollow">JSFiddle with original width: 50% that caused an overlap</a></p>
  
  <p>I've tried setting the DIVs to position: relative, and floating and clearing them. Why is this happening and how can I solve it?</p>