title: div with % width and px border
body: <p>I'm trying to create a div with 3 divs inside. </p>
  
  <pre><code>    .outter
      {
          right: 100px;
          border: 10px solid white;
      }
      .main
      {
          overflow: hidden;
          width: 100%;
          height: 150px;
      }
      .left
      {
          float: left;
          width: 40%;
          height: 100%;
          background-color: green;
          border-right: 5px solid white;
      }
      .center
      {
          float: left;
          width: 40%;
          height: 100%;
          background-color: red;
          border-left: 5px solid white;
          border-right: 5px solid white;
      }
      .right
      {
          float: right;
          width: 20%;
          height: 100%;
          background-color: orange;
          border-left: 5px solid white;
      }
  
  
  
  &lt;div class="outter"&gt;
      &lt;div class="main"&gt;
          &lt;div class="left"&gt;
          &lt;/div&gt;
          &lt;div class="center"&gt;
          &lt;/div&gt;
          &lt;div class="right"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what I got so far. 
  -The parent div should have a right distance fixed of 100px, a border of 10px white and the widht is the 100% - 100px;
  -The inside divs have 40% + 40% + 20% with a distance between them of 10 px (thats why I putted the border-left 5 and border-right 5.</p>
  
  <p><img src="https://i.stack.imgur.com/S7DAD.png" alt="enter image description here"></p>
  
  <p>I'm having problems setting this. What I need is to have fixed sized borders and margin to the right. the other divs should be dynamic to fullfill the 100% width.</p>
  
  <p>Can anyone help me?</p>
  
  <p>Regards,</p>