horizontal scroll for Div

Question

I am trying to get the horizontal scroll for the div slots. Below is my code.

Slots is the container with 200 px width, which will display 2 slots,

Each slot of width 100 px.

I want to display horizontal scroll when number of slots is more than 2.

Please help me out.

<div class="slots">
    <div class="slot">
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
    </div>
    <div class="slot">
        <span class="slot-busy"> </span>
        <span class="slot-busy"> </span>
        <span class="slot-busy"> </span>
        <span class="slot-busy"> </span>
    </div>
    <div class="slot">
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
        <span class="slot-free"> </span>
    </div>
</div>

.slots{
     width: 200px;
     overflow-y: hidden;
     display: inline-table;
     height: 25px;
     overflow: auto;
}

.slot{
     width:100px;
     height:25px;
     display: inline-block;
}

.slot-free, .slot-busy {
     width: 25px;
     height: 25px;
     display: inline-block;
     margin: 0;
     padding: 0;
}

Answer 1

Here you go mate...

Fiddle : http://jsfiddle.net/logintomyk/6K6f8/1/

CSS

   .slots{
        width: 200px;
        height: 50px;
        overflow-x:scroll;
        white-space: nowrap;
    }

   .slot{
        height:25px;
        width:100px;
        display: inline-block;
        cursor:pointer;
        margin-left:20px;
      }

   .slot-free, .slot-busy {
         width: 25px;
         height: 25px;
         display: inline-block;
         margin: 0;
         padding: 0;
    }

HTML

<div class="slots">
            <div class="slot">
                <span class="slot-free"> span </span>
                <span class="slot-free">span </span>
                <span class="slot-free">span </span>
                <span class="slot-free"> ggvg</span>
            </div>
            <div class="slot">
                <span class="slot-busy">span </span>
                <span class="slot-busy">span </span>
                <span class="slot-busy">span </span>
                <span class="slot-busy">dfffff </span>
            </div>
            <div class="slot">
                <span class="slot-free">span </span>
                <span class="slot-free">span </span>
                <span class="slot-free">span </span>
                <span class="slot-free"> sdfdfds</span>
            </div>
</div>