title: Force elements to be horizontally aligned
body: <p>Let's say I have random children in my div, which has fixed height and width set to 100% to breathe with the layout.</p>
  
  <p>Which CSS must I use to force child elements to align horizontally and when the div's width is smaller then the content, display a scrollbar and not overlap one another? </p>
  
  <p>Fiddle:<a href="http://jsfiddle.net/GRBc6/1/" rel="noreferrer">http://jsfiddle.net/GRBc6/1/</a></p>
  
  <p>simple css:</p>
  
  <pre><code>.parent{
      width:500px;
      height: 50px;
      background-color: red;
  }
  .kid{
      width: 150px;
      height: 20px;
       background-color: green;
      float:left;
      margin-left:4px; 
  }
  </code></pre>