title: How to make the container width fit the contents when using a max width and floatable elements cross-browser?
body: <p>I am trying to have a container div width match the contents when using a max-width with floatable elements inside.</p>
  
  <p>This is working fine in Chrome, but IE and Firefox don't seem to work as I would like. I have created a fiddle to illustrate: <a href="http://jsfiddle.net/Onthrax/bb0hcLwh/" rel="nofollow">http://jsfiddle.net/Onthrax/bb0hcLwh/</a></p>
  
  <p>Above fiddle works perfectly in chrome, the container is matching width of the contents, but FF en IE are not. </p>
  
  <p>How can I adjust the CSS to have the container match the width in all browsers?</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>#container {
    max-width: 20%;
    background-color: grey;
    margin: auto;
    word-wrap: break-word;
    float: left;
  }
  #container p {
    background-color: green;
    display: block;
    overflow: hidden;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;p&gt;Sample Text 1&lt;/p&gt;
    &lt;p&gt;Sample Text 2&lt;/p&gt;
    &lt;p&gt;Sample Text 3&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note. The snippet gives different results than the fiddle for some reason.</p>