title: How to make 3 divs side by side
body: <p>How can i make 3 divs side by side. where div1 would be extreme left ,div3 would be extreme right and div2 in the middle.</p>
  
  <p>I know this can be done by display:flex and justify-content:space-between ,but i am looking for an approach without flex.</p>
  
  <p>Here is my approach ,but could not achieve it successfully.</p>
  
  <p>I tried to make all div's display:inline-block and float:left and float:right to the two extreme divs and for the middle one i tried margin:auto,but looks like it is not respecting it</p>
  
  <p>Please help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    border: 1px solid;
  }
  .container div {
    height: 50px;
    width: 50px;
    background: red;
    display: inline-block;
  }
  #div1 {
    float: left;
  }
  #div3 {
    float: right;
  }
  #div2 {
    margin: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div id="div1"&gt;&lt;/div&gt;
    &lt;div id="div2"&gt;he&lt;/div&gt;
  
    &lt;div id="div3"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>