title: align fixed width child-elements centrally in unknown-width parent-container
body: <p>Hi HTML/CSS Developers ! 
  Stuck in a strange scenario 
  will try to explain my query through images.
  Need it to work in IE 8 or 9 atleast.</p>
  
  <p><strong>Points:</strong>
  its an approach for a responsive layout, </p>
  
  <pre><code>.container {width:100%;margin-left:auto;margin-right:auto;display:block;}
  .parent-container {width:auto;overflow:hidden;margin:0 auto;display:block}
  .child-element {width: 285px;float:left
  }
  </code></pre>
  
  <p><strong>Hierarchy</strong>
  .container > .parent-container > .child-element</p>
  
  <p><strong>Labels:</strong>
   I have a 100% container</p>
  
  <p>inside it, I have a parent-container {no width-declared (red background color)}
  inside that i have child-elements with a fixed width.</p>
  
  <p>What I want that, no matter, what my screen size is, if there is space for 3 child or 4-child elements, my parent element should always be in center.</p>
  
  <p><em>width of child elements should contribute to parent-elements width</em></p>
  
  <p><strong>This is what i have</strong></p>
  
  <p><img src="https://i.stack.imgur.com/opdR8.jpg" alt="This is what I have"></p>
  
  <p><strong>This is what i am getting</strong>
  <img src="https://i.stack.imgur.com/FsMt3.jpg" alt="This is what I&#39;m getting"></p>
  
  <p><strong>This is what i want it to be (see the parent-width is reduced depending upon child-element)</strong>
  <img src="https://i.stack.imgur.com/IDKhu.jpg" alt="This is what I need"></p>
  
  <p><strong>FIDDLE</strong></p>
  
  <p><a href="http://jsfiddle.net/happy2deepak/9wm7ppwL/2/" rel="nofollow noreferrer">http://jsfiddle.net/happy2deepak/9wm7ppwL/2/</a></p>