How does css container width and overflow property work? - css

Question

Hi I have this jsbin here, it should look like:
My questions are:
Questions1 :
What does the 400% do? Why we need to set this?
#slides .inner {
width: 400%;
}
Question2:
If I comment out overflow like this:
#overflow {
width: 100%;
/* overflow: hidden; */
}
it will look like this, even I have set the max-width to be 300px
But if I keep the overflow and comment out the two width
#overflow {
width: 100%;
overflow: hidden;
}
#slides .inner {
/* width: 400%; */
}
#slides article {
/* width: 25%; */
float: left;
}
It will look like:
Shouldn't all the image block goes to the same row as shown in the picture above?
Question3:
Why we need to set the width? If I comment out width: 25%; it will still work properly.
#slides article {
width: 25%;
float: left;
}

Answer 1

Question 1:
The #slides .inner is set to width: 400%; because you have 4 slides and you want each slide to take up 100% of the parent element, in this case the 300px #slides div.
#slides .inner {
width: 400%;
}
Question 2:
The "overflow: hidden;" is called to hide the other 300% and only display them while they are the active slide in the 300px #slides div.
When you remove "overflow: hidden;" all of the slides are displayed but the actual #slides div itself is still just 300px.
When you comment out the "width: 400%;" The elements stack because the width falls back to 300px defined by:
#slider {
max-width: 300px;
}

Answer 2

Actually it is pointless if you give overflow:hidden along with width:100%
you sholud give width or max-width in px inorder for the overflow:hidden get effect..!!
Note: Anybody can correct me if i am wrong..!!
if you try
this
http://jsbin.com/hivunuga/7/edit
CSS
#slider {
max-width:300px;
text-align: center;
margin: 0 auto;
}
#overflow {
width: 100%;
}
#slides .inner {
width: 1200px;
}
you will know why we need overflow:hidden;

Answer 3

Question 1:
What does the 400% do?
#slides .inner {
width: 400%;
}
This will set the width of element .inner to 4 times (400%) the width of its parent.
Question 2:
If I comment out overflow like this:
#overflow {
width: 100%;
//overflow: hidden;
}
This is not a valid comment in CSS, and will cause an error or unwanted styling. Try commenting like this:
/* This is a CSS comment */