title: css divide div into four equal parts with padding
body: <p>i have a content div, and in there i would like a have four equal div's depending
  on the page's width and height.</p>
  
  <p>currently this is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;div class='A' id="none" data-panel_type="none"&gt;
      &lt;textarea id="1" name="none"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class='B' id="none" data-panel_type="none"&gt;
      &lt;textarea id="2" name="none"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class='C' id="none" data-panel_type="none"&gt;
      &lt;textarea id="3" name="none"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class='D' id="none" data-panel_type="none"&gt;
      &lt;textarea id="4" name="none"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#content {
      border: 2px solid;
      width: 100%;
      height: 100%;
      position: relative;
      top: -15px;
      left: -15px;
      padding: 10px;
    }
  
    #content .A {
      border: 2px solid;
      width:50%;
      height: 50%;
      float: left;
      background: purple;
    }
  
    #content .B {
      border: 2px solid;
      width:50%;
      height: 50%;
      float: left;
      background: purple;
    }
  
    #content .C {
      border: 2px solid;
      width:50%;
      height: 50%;
      float: left;
      background: purple;
    }
  
    #content .D {
      border: 2px solid;
      width:50%;
      height: 50%;
      float: left;
      background: purple;
    }
  </code></pre>
  
  <p>what do i need to change to it in order to work? thanks.</p>