[mathias]

Hit the attachment, it illustrates my problem:

I can't get the green left column to stay equal height with the right column so they both terminate at the purple footer below them. That white space shouldn't be there! The two blue blocks represent images that need to appear above and below the content in the green left column. The green left column is absolutely positioned. Right column is not, but it does have a left margin as wide as the green left column to hold it in place. Then the footer div is simply placed after the right column.

How to make the columns stay equal in height to eachother?

[xENo]

Your only real option here, because of the right column possibly adjusting, is to use an image background for the main content area and use a technique called "Faux columns".

There's an article for it here... err.. I can't post outbound links yet (i'm a newb here)

alistapart.com/articles/fauxcolumns/

Hopefully that works... it should explain the technique to you.

[cgl]

There are a couple other solutions - Ed Elliot has one <ejeliot.com/blog/61> and Roger Johansson has another <456bereastreet.com/lab/equal_height/>. Neither of these use images which can be good or bad depending on your design.