Positioning div at bottom inline - html

Question

I need to position some images, inline on the bottom of a container.
I tried to do as this question asks, but I can't understand why with me doesn't work and escapes from the container.
Could you help me? This is my code:
<div id="banner">
<div id="uscite">
<div id="jp"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />text</div>
<div id="it"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />text</div>
</div>
<div id="nav_main">
<div style="margin: 0 auto;"><img src="../inc/home.png" /></div>
<div style="margin: 0 auto;"><img src="../inc/staff.png" /></div>
<div style="margin: 0 auto;"><img src="../inc/forum.png" /></div>
<div style="margin: 0 auto;"><img src="../inc/disclaimer.png" /></div>
<div style="margin: 0 auto;"><img src="../inc/secret.png" /></div>
</div>
</div>
CSS:
div#banner{
padding:10px;
border:1px solid #444444;
background: url('header2.png') no-repeat center center;
height:400px;
}
div#nav_main{
position: absolute;
left: 0;
width: 1180px;
bottom: 0;
}
div#uscite{
padding:30px 20px;
float:right;
border:0px;
height:35%;
width:20%;
}
div#jp{
text-align: center;
width:50%;
height:100%;
float:left;
border:0px;
}
div#it{
text-align: center;
width:50%;
height:100%;
float:right;
border:0px;
}
http://jsfiddle.net/nu7eoj0q/1/
Edit: I'd also like add another div (called "social") under "uscite"'s one. but it doesn't appear. What am I wrong?
http://jsfiddle.net/faeba3v1/

Answer 1

I think you want to do this
Js Fiddle
new properties added
#nav_main div{
display:inline-block;
}
div#banner{
position:relative;
}