title: Two fluid columns on the sides and width:auto for the middle column
body: <p>I need to create a CSS/HTML navigation menu with a logo aligned in the center and menu options on the sides. I thought of doing it this way: </p>
  
  <p><a href="http://jsfiddle.net/d32an55L/" rel="nofollow">http://jsfiddle.net/d32an55L/</a></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="left"&gt;aaaa&lt;/div&gt;
      &lt;div id="center"&gt; Center content&lt;/div&gt;
      &lt;div id="right"&gt;aaaa&lt;/div&gt;
  &lt;/div&gt;
  
  #wrapper{
      display:table;
      width:100%;
      height:100%;
  }
  #wrapper &gt; div{
      display:table-cell;
      height:100%;
  }
  #left {
      background-color:pink;
      text-align:right;
  }
  #center {
      background-color:green;
      width:100px;
  }
  #right {
      background-color:red;
  }
  body, html{
      width:100%;
      height:100%;
  }
  </code></pre>
  
  <p>The thing is that I don't know how to make the width of the middle column to fit the content inside the column, something like width:auto;</p>
  
  <p>Do you guys know if that can be done? Is there maybe a better way to achieve this?</p>
  
  <p>Thanks.</p>
  
  <p><strong>Edit</strong>:
  All I need is to make the middle column wide as the content it contains while the side columns remain fluid.</p>