title: Responsive divs 50% height of viewport size
body: <p>I try to make a grid of four boxes each 50% height and 50% width of the full screen size, like shown in this picture:
  <a href="http://a.pomf.se/gqnzzs.jpg" rel="nofollow">http://a.pomf.se/gqnzzs.jpg</a></p>
  
  <p>My problem is that I can't get the 50% height to work. How can I set the height of 2 div above each other at each a height of 50% of the viewport size?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="row"&gt;
      &lt;div class="panel-1"&gt;... &lt;/div&gt;
      &lt;div class="panel-2"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="panel-3"&gt;...&lt;/div&gt;
      &lt;div class="panel-4"&gt;...&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper{
      width: 100%;
      height: 100%;
      display: inline-block;}
  
  .panel-1{
      width: 50%;
      float: left;
      height: 50%;}
  
  .panel-2{
      width: 50%;
      float: left;
      height: 50%;}
  
  .panel-3{
      width: 50%;
      float: left;
      height: 50%;}
  
  .panel-4{
      width: 50%;
      float: left;
      height: 50%;}
  </code></pre>
  
  <p>I greatly appreciate any help!</p>
  
  <p>Greets</p>