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.

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

NoobEditor · Accepted Answer

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

horizontal scroll for Div

Answers (1)

Related Questions