Overflow Hidden for div inside a div - css

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

Answer 2

In the fiddle, the middle div (.banner) isn't positioned, so the absolute positioning of the inner div (.info) is with respect to the outermost div (#banner), which does have position, but does not have overflow:hidden.
Therefore, in order to hide the overflow, add overflow:hidden to the outermost div as well.

Answer 3

UPDATED
http://jsfiddle.net/Augustus06111993/Rkgfy/
Since no Fiddle, I am taking a shot in the dark..
Since you used absolute position it will override your overflow method because
This tells the browser that whatever is going to be positioned should
be removed from the normal flow of the document and will be placed in
an exact location on the page. It is also taken out of the normal flow
of the document - it won't affect how the elements before it or after
it in the HTML are positioned on the Web page
Your outer div and inner div have same dimensions.. Try changing the css of inner div like this and you can see your image and div seperately
.info {
width: 50%;
height: 50%;
float:left;
opacity: 0.70;
}
.image {
width:50%;
height:50%;
}
.outer {
width: 250px;
height: 500px;
overflow: hidden;
margin-right: 20px;
cursor: pointer;
}