CSS positioning and overflow:hidden

Question

I have a #container div which wraps all content. And #slides-wrap div which is inside #container . I don't know width of #sliders-wrap , but I know size of every .slide in it (slides number are unbounded). Also part of #slides-wrap that overflows screen must be hidden. See attached image as example.

Is it real to do?

Answer 1

Yes, it is possible, you just need to give your #slides-wrap with following properties

display: inline
white-space: nowrap;

Check this out: http://jsfiddle.net/sv3a4522/

Answer 2

set z-index for div:

#container
{
    overflow:hidden;
    z-index:2;
    position: relative;
    width: your-value
}

#container #slides-wrap
{
    width:your-value; /*(1000px or more)*/
    z-index:1;
    position: relative;
}

#slides-wrap .slide
{
    width:100px /*your value*/
}

Demo: