css - 左側の div を右側のコンテンツの下に揃える

Question

私は以下のようなhtml構造を持っています:

<div class="pagebody">
 <div class="pageleft">
      <div class="sidebarmenu">
      </div>
      <div class="sidebarbottom">
      </div>
 </div>   <!--  end pageleft  -->

 <div class="pageright">
      ...
      ...
      ...
 </div>   <!--  end pageright  -->

 <div class="clear"></div>

 </div>   <!--  end pagebody  -->

CSSは

.pagebody {
width:960px;
text-align:left;
margin:0 auto;
}
.pageleft {
width:333px;
float:left;
position:relative;
padding:24px 0 0 37px;
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -301px;
}
.pageright {
width:590px;
float:right;
padding-top:29px;
min-height:1200px;
}
.sidebarmenu {
margin-right:72px;
font:15px Helvetica, Arial, sans-serif;
}
.sidebarbottom {
margin-left:10px;
position:absolute;
bottom:0;
    height:301px;
}

「pageright」コンテンツの高さは固定されておらず、さまざまです。「sidebarbottom」を「pageright」の下に揃えたい。絶対位置と相対位置で試しましたが、機能しません。

何か助けはありますか？

Answer 1

これはあなたが達成しようとしていることですかhttp://jsfiddle.net/2cUJS/