title: Two equal 50% width column full height
body: <p>I'm trying to create 2 columns, each occupying width of 50%. I need the column height to stretch to the full height of the screen, even when empty, so I can display the backfround color. I tried adding position: absolute but am having mixed results where only one column appears</p>
  
  <p>My HTML</p>
  
  <pre><code>.lcolmn {
    width: 50%;
    height: 100%;
    background-color: red;
    float: left;
  }
  .rcolmn {
    width: 50%;
    height: 100%;
    background-color: blue;
    float: left;
  }
  .wrapper {
    background: green;
    margin: 0;
    padding: 0px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
     &lt;div class="lcolmn"&gt;
         &lt;div class="lcontent"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="rcolmn"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>