Overflow Hidden for div inside a div

Question

I have an outer div and inside it, I have an image and another div. Now, the outer div has a certain width and height and has an overflow: hidden; Now my image works fine, meaning that even though it's bigger than the div it won't overflow.

The problem i am having is with the other div that's inside the outer div. This inner div is above the image that i have. But it still wouldn't show. But after I positioned it to absolute. It worked properly.

After that I positioned outside the barriers of the outer div. Now, since I made the overflow of the outer div hidden, it shouldn't show right? Yet, the inner div shows. So here is what I would like solved.

• Why wasn't the inner div showing initially and why did i have to give the div the property of position:absolute;?

• Why are is my inner div still showing outside the boundaries of my outer div even though my outer div has the property of overflow to hidden.

• How do I hide my inner div when its not inside the outer div. Now, note that I do not want the inner div to actually hide. I just want it not seen unless it's in my outer div.

Here is my source code for reference:

• The css property of the outer div:

  .banner {
      width: 250px;
      height: 500px;
      overflow: hidden;
      float: left;
      margin-right: 20px;
      cursor: pointer;
  }
  

• The css property of the inner div:

  div.info {
       position: absolute;
       width: 250px;
       height: 500px;
       top: 0px;
       opacity: 0.70;
       -webkit-transition: -webkit-transform 300ms;
  }
  

Here is a link to a jsfiddle http://jsfiddle.net/jMX3n/2/

Answer 1

Found the solution. I deleted the outer div with the id of #banner. And then to the .banner class, I added position: relative and then shifted the div a little. Apparently I had multiple div's similar to the inner div I was describing. In my .banner class I added the property float:left;. The overflow worked properly. Here is the new code:

The div class:

.banner {
    position: relative;
    top: 100px;
    left: 250px;
    width: 250px;
    height: 500px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    cursor: pointer;
}

The inner div:

div.info {
    position: absolute;
    width: 250px;
    height: 500px;
    top: 0px;
    left: -250px;
    opacity: 0.70;
    -webkit-transition: -webkit-transform 300ms;
}