title: css position with percent
body: <p>I have a problem with position divs relative in an other div. </p>
  
  <p>I want to make a div that is position in the horizontal middle of the screen and in this div I want to place 3 other div with the same height. But all of them should be responsive. </p>
  
  <p>A picture says more than words :)</p>
  
  <p><img src="https://i.stack.imgur.com/BdYwK.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div id="zwrapper"&gt;
   &lt;div id="z1" class="row"&gt;&lt;/div&gt;
   &lt;div id="z2" class="row"&gt;&lt;/div&gt;
   &lt;div id="z3" class="row"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The blu element is the HTML </p>
  
  <pre><code>html{
    background: steelblue;
    height: 100%;
    width: 100%;
    top:0; left:0; bottom: 0; right:0;
  }
  </code></pre>
  
  <p>The lime one ist that div <code>(#zwrapper)</code> where I want to add the three red divs.</p>
  
  <pre><code>#zwrapper{
    height: 81%;
    top: 10%;
    width: 100%;
    left: 0;
    position: absolute;
    background: lime;
  }
  </code></pre>
  
  <p>The red divs make problems. All divs have a height of 30%. The first one should be aligned to top and the third to bottom. The middle div with the id <code>#z2</code> is the only one which get a margin of <code>5%</code>.</p>
  
  <pre><code>.row{
    position: relative;
    width: 80%;
    background: red;
    height: 30%;
   }
   #z2{
    margin: 5% 0;
   }
  </code></pre>
  
  <p>My idea was to put the 3 divs with a height of 30% into the wrapper and give the middle one a margin (top / bottom) of 5% so I get a height of 100%. 
  But this does not work. </p>
  
  <p>If I resize the window in width, the height of the red divs changes though I don't change the height. </p>
  
  <p>I make a fiddle to demonstrate this. <a href="http://jsfiddle.net/ELPJM/" rel="noreferrer">http://jsfiddle.net/ELPJM/</a> </p>
  
  <p>Thanks in advance</p>