title: Divs next to each other for Navigation
body: <p><strong>Edit: Now that flexbox has become basically universally supported, use flexbox!</strong></p>
  <p>I want to have 3 <code>div</code> objects next to each other for my navigation bar. There should be an image in the right one to begin the navigation bar, one on the end to finish it, and the middle part should be as wide as it needs to be to fit all the text in. And the navigation bar should be in the middle of the page. I am not sure if I did it totally wrong, because it won't really work at all. This is the code I already got.</p>
  <p><strong>HTML:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;navigation&quot;&gt;
      &lt;div class=&quot;navLeft&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;navMiddle&quot;&gt;
          &lt;ul&gt;
              &lt;li id=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;info.html&quot;&gt;Info&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;projects.html&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;contactus.html&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class=&quot;navRight&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre class="lang-css prettyprint-override"><code>.navigation {
      margin: auto;
      height: 70;
  }
  
  .navigation ul {
      list-style: none;
  }
  
  .navigation ul li {
      display: inline;
      margin: 0px;
  }
  
  .navLeft {
      float: left;
      width: 13;
      height: 70;
      background: url(../images/Nav_L.png);
  }
  
  .navMiddle {
      height: 70;
      background: url(../images/Nav_Mid.png) repeat-x;
  }
  
  .navRight {
      float: right;
      width: 13;
      height: 70;
      background: url(../images/Nav_R.png);
  }
  </code></pre>