将div定位在底部内联

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