CSS bottom box align

[APT]

In the CSS code below, .main "height: 35em;" works just fine in IE and FF.

Though in .sidebar the "bottom: 20px;" only works in FF.

Thing is, I really like the way .sidebar works in FF. But IE it doesn't work
in IE.

I even compromised and tried to put "height: 70%;" but it still wouldn't
work in IE.

I simply want the two text boxes to align about 20px from the bottom of the
page (not fixed).

You can see it at: http://www.hainesdolphins.org/kayak/html/index.php
(the left blue sidebar, when viewed in FF, is what I want)

Here's the code:

..main
{position: absolute;
top:162px;
padding-left: 20px;
padding-right: 10px;
width: 467px;
color: #000;
background-color: #fff;
height: 35em;
overflow: auto;
border-bottom: 12px #9cf solid;
}

..sidebar
{position: absolute;
top:162px;
left: 497px;
padding-left: 6px;
padding-right: 6px;
width: 131px;
color: #000;
background-color: #69c;
bottom: 20px;
overflow: auto;
border-bottom: 12px #9cf solid;
}

Any thoughts?

Thanks.