title: Adjust the width of the container according children width when children are on multiline
body: <p>I want some solution to adjust the width of the container according children width when children are on multiple lines. When children are on just single line then display:inline-block for the container element make what I need. But when they are on multiple lines, the container just behave the same like display:block. </p>
  
  <p>Only two solutions what I know are:
  1) Set container max-width as some multiplying of children width. But it is not a universal solution (I mean display on devices with lower resolution).</p>
  
  <p>2) Use jQuery to compute the container width. but I'd rather like to use some pure HTML/CSS solution.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div id="wrapper1"&gt;     
      &lt;div id="wrapper2"&gt;                
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;          
         &lt;div class="el"&gt;
         &lt;/div&gt;        
      &lt;/div&gt;         
  &lt;/div&gt; 
  
  
    &lt;div id="wrapper2"&gt;                
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;          
      &lt;div class="el"&gt;
      &lt;/div&gt;        
    &lt;/div&gt;         
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#wrapper1{
    max-width:1200px;
    margin:auto;
  }
  #wrapper2{
    background: #FF0;
    display:inline-block;
  }
  .el{
    float:left;
    margin:10px;
    width:200px;
    height:200px;
    background:#00F;
  }
  </code></pre>