I am new to web design using tableless and I'm having problem positioning some elements on my page..

Here's the sample html: http://christianruado.comuf.com/sample.html

As you can see from the screen shots I want my right div to be vertically stretched down to the same level of my footer and position my bottom element to the lowest part of the right container.

#right {
 float:right;
 width: 19%;
 background:#FF3300;
 margin-left:2px;
 height: 100%;
}

#right .bottom {
 bottom:0;
 display:block;
 background-color:#FFCCFF;
 height:30px;
}