title: three divs side by side with middle div expanding
body: <p>I want three divisions side bu side with the middle explanding and the other two positioned at the ends. So here is what I tried. The padding rule disturbs the positioning but its necessary. I want approach which works in all major browsers(So ruling out flexbox)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Button {
    width: 80%; /*Useless Rule*/
  }
  .Button &gt; .left {
    float: left;
    background-color: blue;
    padding: 5px;
  }
  .Button &gt; .right {
    float: right;
    background-color: red;
    padding: 5px;
  }
  .Button&gt; .middle {
    width: 100%;
    background-color: green;
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;div class="Button"&gt;
      &lt;div class="left"&gt;&amp;lt;&lt;/div&gt;
      &lt;div class="right"&gt;&amp;gt;&lt;/div&gt;
      &lt;div class="middle"&gt;Middle&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>