title: Split screen into 4 quadrants with a border around each
body: <p>I have split my screen into 4 quadrants.  </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="test.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="aqua pull-left"&gt;&lt;/div&gt;
  
          &lt;div class="blue pull-right" &gt;&lt;/div&gt;
  
          &lt;div class="green pull-left bottom"&gt;&lt;/div&gt;
  
          &lt;div class="tan pull-right bottom"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is my css:</p>
  
  <pre><code>html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      min-height: 100%;
      background: black;
  }
  
  div {
      width: 50%;
      height: 50%;
  }
  
  .pull-left {
      float: left;
  }
  
  .pull-right {
      float: right;
  }
  </code></pre>
  
  <p>I want a black border around each one of my squares.  When I add a border, then my squares line up vertically, while alternating on the left and right of the screen.  I know this is a simple fix, but have been stuck at it for a while.  Any help would be great.  Thanks. </p>