title: how to collapse width of parent element to total width of child elements
body: <p>My parent width takes up the whole 100% width of parent element.</p>
  
  <p>Instead, I want parent width to collapse to total width of child elements.</p>
  
  <p>jsfiddle : <a href="http://jsfiddle.net/z9Unk/232/" rel="nofollow">http://jsfiddle.net/z9Unk/232/</a></p>
  
  <p>Notice how red-bordered parent width is greater than total width of green-colore child elements. I want to collapse the parent width.</p>
  
  <p>Please advise necessary changes.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="item1"&gt;
    &lt;div class="item2"&gt;
        item2
    &lt;/div&gt;
    &lt;div class="item2"&gt;
        item2
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.item1 {
    position:relative;
    white-space: nowrap;
    width:auto;
    overflow: hidden;
    border:2px solid red;
  }
  
  .item2 {
   position:relative;
    display:inline-block;
    background-color: green;
    width : 255px;
    height : 205px;
    margin-right:6px;
    border:1px solid blue;
  }
  </code></pre>