How to place divs inline and hide/show them as user wants as they go beyond the width of parent DOM element?

Question

I have a parent DIV with variable width. It can have many DIVs.

Now, what i want is as it renders, if it cannot accomodate all its child DIVs then, may be collapse them from now and as user hover or scrolls, these DIVs should appear.

Something like this:

Also, I am trying to display those coloured child DIV as shown in the image. Those colored DIVs should appear with margin on 4 of their sides.

Here is the JS Fiddle

http://jsfiddle.net/Dw2Qk/

HTML:

<div class="timeline-details">
    <div>
        <span id="data-details">Some information </span>
    </div>
    <div>
        <span class="range-icon" style="background: green">ABC </span>
        <span class="range-label">ABC1 </span>
        <span class="range-time">testing 123 </span>
    </div>
    <div>
        <span class="range-icon" style="background: blue">123 </span>
        <span class="range-label">AFG5 </span>
        <span class="range-time">testing 3 34 5 6</span>
    </div>
    <div>
        <span class="range-icon" style="background: orange">UTY </span>
        <span class="range-label">AFG </span>
        <span class="range-time">blah blhab lha </span>
    </div>
    <div>
        <span class="range-icon" style="background: blue">DIO </span>
        <span class="range-label">DIO90 </span>
        <span class="range-time">testing last </span>
    </div>
</div>

CSS:

.timeline-details {     
    text-transform: uppercase;  
    height: 80px;   
    display: inline-block;  
    border: 1px solid rgb(215, 215, 218);
    text-align: center; 
}

.timeline-details div {     
    display: inline-block;  
    padding: none;  
    margin: none;   
    border-right: 1px solid rgb(215, 215, 218);     
    height: 100%;  
}

.timeline-details span {    
    position: relative;  
}

.timeline-details .range-icon {     
    width: 40%;     
    height: 100%;   
    float: left;    
    text-align: center  
} 

.timeline-details .range-label {    
    width: 60%;     
    height: 50%;    
    float: right;   
    text-align: left
} 

.timeline-details .range-time {     
    width: 60%;     
    height: 50%;    
    float: right;   
    text-align: left  
}

Any help/suggestions/hint/idea will be appreciated

Thanks