javascript - Add elements to non-wrapping container, overflowing on left side -

i need add elements container using js. when total width of inner elements bigger width of wrapping div, leftmost element should disappear left side.

i thought i'd able desired effect using

p {     border: 1px solid red;     display: inline-block;     float: left;     margin: 1px;     padding: 0;     white-space: nowrap; } 

but doesn't work, because elements floating next line.

fiddle: http://jsfiddle.net/rqu3e/2/

thankful advice!

what this solution?

you need wrap container element has fixed width/height , overflow:hidden:

width: 200px; height: 23px; overflow: hidden; position: relative; 

as width of container bigger width of wrapper, align container right side of wrapper (via js):

position: absolute; right: 0px;