Bilder till botten av en div

Jag har två bilder som ska stå över varandra i botten av en div. Men jag lyckas inte få till det. htmlen se ut så här:
<div id="left">
<div id="left_menu">
<ul>
<li>länk</li>
<li>länk</li>
</ul>
</div>

<div id="left_contioner">
<p> <<sponsorer>> </p>
<p>
bild 1
bild 2
</p>
</div>
</div>

Och cssen ser ut så här:
#left {
float: left;
width: 190px;
padding: 0px;
}

#left_contioner {
margin-top:100%;
text-align:center;
color:#fff;
}

/*** LEFT MENU ***/
#left_menu {
margin-top: -3px;
padding: 0px;
list-style: none;
width: 190px;
background: url(../images/gif/bg_left_meny.gif) repeat;
}

#left_menu li {
list-style: none;
text-align: center;
margin: 8px;
}

#left_menu ul {
margin: 0px;
padding: 10px;
line-height: 90%;
}

Med margin-top:100%; i #left_contioner. Hamnar bilderna längst ner. Förutom att den sista bilden trycker ner hela sidan lika mycke som den är hög. Och om sidan skulle bli väldigt lång så stannar bilderna kvar någon stans i mitten.

Så jag bytte ut margin-top:100%; i #left_contioner till position: absolute; bottom 0;. Och la till position: relative i #left. Men då hamnar bilderna över menyn. Hoppas ni förstår hur jag menar.

Någon snäll person här som kan hjälpa mig? Och förklara hur jag ska göra.