Force elements to be horizontally aligned

Let's say I have random children in my div, which has fixed height and width set to 100% to breathe with the layout.

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?

Fiddle:http://jsfiddle.net/GRBc6/1/

simple css:

.parent{
    width:500px;
    height: 50px;
    background-color: red;
}
.kid{
    width: 150px;
    height: 20px;
     background-color: green;
    float:left;
    margin-left:4px; 
}