title: Two divs side by side inside wrapper
body: <p>I am trying to place two divs side by side with 20px margin between them. Divs are inside wrapper, which width is 800px. Left div is 250px and right div is 550px, but of course if I add 20px margin between them, total width is increasing over 800px. Is there any way to force right div width to be 550px - 20px margin?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper {
      max-width: 800px;
      height: 400px;
      background-color: green;
      margin: 0 auto;
  }
  
  .left {
      width: 250px;
      height: 300px;
      background-color: blue;
      float: left;
      margin-right: 20px;
  }
  
  .right {
      width: 550px;
      height: 300px;
      background-color: red;
      float: left;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="left"&gt;
          &lt;/div&gt;
  
          &lt;div class="right"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I mean do I have to decrease width manually or is there any better solutions?</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/ytsvd77f/" rel="nofollow">https://jsfiddle.net/ytsvd77f/</a></p>