CSS and Div Height Problem

Hello, I'm new here, have been browsing the forums but haven't found an answer to my question yet.

I'm new to the DIV tag, though I've done a bit of CSS coding over the years. Just a little, though.

Anyway, in the attempt (like many others) to move away from tables, I'm trying div's.

So I have this page with a header div and a left menu bar div. I want the left menu bar div to be 100% of the remainder of the page after the header is done with it. But if I put in height: 100% in the left menu div, it creates a scrollbar and pushes the page down. I think it's making it 100% of what would have been the page without the 150px header at the top.

How do I make that left menu bar be 100% of the remainder of the page?

Looks the same to me in IE an FF:
http://www.utahdogs.com/storage/test/index.php

Here is the CSS so far:
http://www.utahdogs.com/storage/test/includes/intro.css

Thanks for the help in advance, this problem has been bugging me for some time now!

maybe it's better to define a resolution to work on. so, if you put a height of 450px (600 of resolution - 150 of the header), anybody using 800x600 - at least - will have a good response.

That is an option. I have usually fairly high resolutions on my monitors, so I like it to expand/contract to the browser window, like tables do.

Normally this is solved by using "faux columns":
http://www.alistapart.com/articles/fauxcolumns/

The problem with this solution is that you can't use a flexible width. There is a solution for this, but it can be a little bit problematic to make it work:
http://www.bzabza.com/css/1/

Thanks for the info. Couldn't quite get it to work but will probably spend more time on it later.

Which of the solutions? I know many are having a hard time with the last solution, unfortunately I haven't used it much myself. But I don't think you will be able to make it work with absolute position as you are using now, you have to float your design.