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?

enter image description here

You need to clarify your question (the last line) as it is utterly vague and no one will be able to answer you as it is currently stated. — John
– John, Commented Sep 13, 2014 at 10:09

The Lazy Log · Accepted Answer · 2014-09-13 10:16:36Z

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/

answered Sep 13, 2014 at 10:16

The Lazy Log

3,5742 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilya Zharkov Over a year ago

Yes, all I need was the white-space: nowrap. Thank you!

Chưa biết · Accepted Answer · 2014-09-13 10:38:54Z

0

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: demo:

edited Sep 13, 2014 at 10:38

answered Sep 13, 2014 at 10:21

Chưa biết

9798 silver badges7 bronze badges

2 Comments

Hashem Qolami Over a year ago

It's overflow not over-flow, Also z-index is not applicable to static positioned elements.

Chưa biết Over a year ago

Yes, overflow, add position: relative for div;

Collectives™ on Stack Overflow

CSS positioning and overflow:hidden

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related