Cant' Position Caption Div Appropriatly

Cant' Position Caption Div Appropriatly

Can you please take a look at This Link and let me know how I can positin
the div with .caption at the bottom of the div with class .wrapper.
I already tried to add position:absolute; bottom:5px; rules to .caption
but it positioned the caption div out of the .wrapper !
<div class="wrapper">
<div class="caption">Test</div>
<div class="main"></div>
</div>
here is the css rules
.wrapper{
height:300px;
width:300px;
background-color:yellow;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;">
margin-bottom:5px;
color:white;
}