title: CSS to fill screen 50% 50% vertically
body: <p><img src="https://i.stack.imgur.com/7Sw0f.jpg" alt="enter image description here"></p>
  
  <p>What's the proper CSS to achieve this for most browsers?</p>
  
  <ul>
  <li>2 Divs - 50% and 50% vertically fill the entire screen.</li>
  <li>Each div has 50% and 50% horizontally to fill 1600px width.</li>
  </ul>
  
  
  
  <pre><code>&lt;!-- TOP 50% --&gt;
  &lt;div class="top"&gt;
     &lt;div class="left"&gt;img&lt;/div&gt;
     &lt;div class="right"&gt;txt&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- BOT 50% --&gt;
  &lt;div class="bot"&gt;
     &lt;div class="left"&gt;text&lt;/div&gt;
     &lt;div class="right"&gt;img&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>