Force elements to be horizontally aligned

css, horizontal-scrolling

Solution

if you make the kid an `inline-block` element and take off the `float:left`, you can make the parent have `white-space:nowrap` and it will achieve what you want:

.parent{
    width:300px;
    height: 50px;
    background-color: red;
    white-space:nowrap;
    overflow-x:scroll;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    display:inline-block;
    margin-left:4px;

}

http://jsfiddle.net/GRBc6/6/

Problem

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; } ```

Original source