怎样使层在底部对齐

以前都是用valign，现在却不能用了，所以去查了解决方法

CSS：

#box1 {
position : relative ; /*使对象不可重叠，从而变成一个可定位容器*/
background : red ;
height : 100px ;
width : 100px ;
}
#box2 {
position : absolute ; /*使对象可以通过相对于BOX1的定位而漂移*/
background : #BBB ;
height : 20% ;
width : 100% ;
left : 0 ; /*距离左边的距离*/
bottom : 0 ; /*距离底部的距离*/
}

HTML：

< div  id ="box1" >
   < div  id ="box2" > 在下边了 </ div >
</ div >