title: How to add space between two elements of 60% + 40% width?
body: <p>Hard to explain in the title so i'll elaborate. Obviously I understand that extra space can't be added between two elements that equal to 100% width of the container, but i'm wondering if there's a way to decrease the width of one by 40px.</p>
  
  <p>I'm pretty confident I could do it in JavaScript if needs be but if an easier css solution is available I'd prefer to use that.</p>
  
  <p>To further explain, I'd like a 40px bewteen the two white elements seen in this image: <a href="https://gyazo.com/551af056aa516eac2ce3c7b16949a0fa" rel="nofollow noreferrer">https://gyazo.com/551af056aa516eac2ce3c7b16949a0fa</a></p>
  
  <p>As you can see I have a large container with a left and right column, with widths of 40% and 60% respectively.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="homeContentContainer" class="homeContentContainer"&gt;
  
      &lt;div class="leftCol"&gt;
          &lt;div class="buyPanel panel"&gt;
          &lt;/div&gt;
          &lt;div class="sellPanel panel"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rightCol"&gt;
          &lt;div class="buyPanel panel"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt; &lt;!-- content container --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.homeContentContainer {
      position: absolute;
      width: 60%;
      margin: 0 auto;
      top: 70px;
      left: 0px;
      right: 0px;
  }
  
  .leftCol {
      width: 40%;
      height: 100%;
      float: left;
  }
  
  .rightCol {
      width: 60%;
      height: 100%;
      float: right;
  }
  
  .buyPanel {
      width: 100%;
      height: 230px;
      margin: 40px 0 0 0;
  }
  
  .sellPanel {
      width: 100%;
      height: 230px;
      margin: 40px 0 0 0;
  }
  </code></pre>