CODEWITHSUNDEEP
css
Blake
Blake

Reputation: 7547

How does css container width and overflow property work?

Hi I have this jsbin here, it should look like:

enter image description here

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

enter image description here

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: enter image description here

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;
}

Upvotes: 0

Views: 101

Answers (3)

stautem
stautem

Reputation: 61

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;
}

Upvotes: 1

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

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;

Upvotes: 1

agrm
agrm

Reputation: 3852

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 */

Upvotes: 0

Related Questions