CSS bottom box align

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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:

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

 {position: absolute;
  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?


Site Timeline