title: Flexbox alternative for IE9
body: <p>I have developed a website with Chrome initially (easiest to design for) but now am getting to IE support model.</p>
  
  <p>That being said, I started with IE11 and made the necessary changes for the quirky differences between IE &amp; Chrome.  But now I am stepping down the IE versions. I was able to get 90% of the webpages to display correctly with CSS for IE10.  But now most of the CSS elements that I have for these two browsers, are for the most part irrelevant for IE9.</p>
  
  <p>I would like to keep from needing to have multiple browser specific style sheets, if possible.</p>
  
  <p>First problems is converting IE10+ implementation of the flexbox model of CSS.</p>
  
  <p>Current Implementation for the flexbox container:</p>
  
  <pre><code>div#navContainer{
      display: flex; //Current browsers (IE11, Chrome, etc)
      display: -ms-flexbox; //IE10 implementation
  }
  
  div#TeamsSection {
      text-align: center;
  }
  
  div.NavSection {
      margin: 0px 7px;
      padding: 4px 0px 0px 0px;
  }
  
  div#teams {
      margin: 0px;
  
      select {
          margin: 0px;
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="navContainer" class="float-left"&gt;
      &lt;div id="LogoSection" class="NavSection"&gt;
          &lt;div id="Logo"&gt;
              &lt;img src="Images/Logo.png" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="TeamsSection" class="NavSection"&gt;
          &lt;label&gt;Select a Team:&lt;/label&gt;&lt;br /&gt;
          &lt;div id="teams"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="UserSection" class="NavSection hidden"&gt;
          &lt;label&gt;Select a User:&lt;/label&gt;&lt;br /&gt;
          &lt;div id="requestor"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know IE9 does not implement Flexbox, so please don't insult the research I have already done. I need an equivalent implementation that will allow me to change the HTML as little as possible.</p>