Question

I want to do a simple effect with a div with a fixed height and width holds a set of divs which can be scrolled left to right.

Here’s the code but for some reason the children don’t want to float

.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.a > div​ {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

http://jsfiddle.net/SZzwP/

Answer 1

You don’t have to (and shouldn’t) change your HTML.

Just use white-space:nowrap to avoid breaking lines

.a{
    width:200px;
    overflow-x:scroll;
    border:3px solid red;
    white-space:nowrap;
}
.a > div {
    width:170px; height:170px;
    display:inline-block;
    background:#eee;
    border:1px dotted #ddd;
}

See it here: http://jsfiddle.net/5Rz98/3/