align images horizontally in a div with horizontal scroll

Question

i want the divs with class div_to_hold_images to get aligned horizontally, even if they overflow so i can put a scroll in the div with class container to see the remaining.

HTML:

<div class="container"> 
    <div class="div_to_hold_images"> 
    </div>
</div>

CSS:

.container {
    height:150px;
    width:400px;
    border:10px solid black;
    text-align:left;
    white-space: nowrap;
    overflow-y:hidden;
}
.div_to_hold_images {
    width:102px;
    margin:2px;
    height:144;
    float:left;
    overflow:hidden;
    margin-left:8px;
}

Demo

Answer 1

Use

display: inline-block;

instead of

float: left;

Demo