title: Containers not showing up in simple html page
body: <p>i'm building a simple html page and I'm basically trying to get two div containers take up the full screen of the site. One on the left and one on the right. Both to take up 50% of the page. For some reason anything after the <code>body</code> line of code isn't showing up. Here is my mark up</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
    &lt;title&gt;Website Name&lt;/title&gt;
  
    &lt;meta name="author" content="Name" /&gt;
    &lt;meta name="description" content="" /&gt;
  
    &lt;style type="text/css"&gt;
    body, html {
      margin: 0;
      height: 100%;
      background: #000;
    }
    .wrapper{
      width:100%;
      height:100%;
      margin:0;
    }
    .container-left{
      width:50%;
      height:100%;
      background:#fff;
      display:inline-block;
    }
  
    .container-right{
      width:50%;
      height:100%;
      background:#ff0;
    }
  &lt;/stlye&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div class="container-left"&gt;&lt;/div&gt;
    &lt;div class="container-right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>For some odd reason none of the containers are displaying. I thought that although nothing was in the containers they are still suppose to display with if the height and width were set. Can anyone explain why this isn't working?</p>