title: How can I automatically fill margin for remainder space?
body: <p><a href="https://i.stack.imgur.com/sDGig.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sDGig.png" alt="IMG"></a></p>
  
  <p>I gave an id to every 3 blocks as follow: <code>#HEAD-LEFT</code>, <code>#HEAD-CENTER</code> and <code>#HEAD-RIGHT</code>. All 3 blocks are floated to the left. I want to make more blocks below the <code>#HEAD-LEFT</code>.</p>
  
  <p>Unfortunately, the string goes up, because there is extra space at the right side of <code>#HEAD-RIGHT</code>. I know it can be solved if I calculate pixel and give <code>margin-right</code>. Is there any way of giving <code>margin-right</code> automatically to fill extra space?</p>
  
  <p>I tried <code>margin-right: auto;</code> but it doesn`t work.</p>
  
  <p><strong>Please</strong> don`t use a grid to solve this problem.</p>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>#HEAD-LEFT{
      font-family: 'Indie Flower', cursive;
      font-size:40px;
      float:left;
      height: 117.4px;
      border-left:2px black solid;
      border-top:2px black solid;
      border-bottom:2px black solid;
      margin-left:258.5px;
      padding-left:30px;
      padding-right: 30px;
      padding-top:45px;
      margin-top:20px;
  }
  
  #HEAD-CENTER{
      font-family: 'Indie Flower', cursive;
      font-size: 70px;
      text-align: center;
      letter-spacing: 15px;
      padding: 30px;
      border: 2px black solid;
      width: 500px;
      float: left;
      margin-top:20px;
  }
  
  #HEAD-RIGHT{
      font-family: 'Indie Flower', cursive;
      font-size:40px;
      float:left;
      height: 117.4px;
      border-right:2px black solid;
      border-top:2px black solid;
      border-bottom: 2px black solid;
      padding-left:30px;
      padding-right: 30px;
      padding-top:45px;
      margin-top: 20px;
  }
  </code></pre>