Well, for a start, if you want a "fluid" page for things like height.... you can't use position:absolute!
You are tellign the browsers to stick something "THERE", so no matter what happens, it will not move.

Additionally, you may find it easier if you stop using height: as well.

In IE, it will treat height: as min-height:.
Where as proper Browsers will treat height: as an explicit isntruction, and will not stretch!
Instead content will break out of it.


So, try it more "organicly"... simply place the divs in the order you want for the column, and let the content sort itself out regarding height.

Trust me...

<div id="rightcolumn">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>

Will give you the right-hand column, with 4 blocks for content... as each one fills in, it will automatically stretch to contain the content.
Better yet, it will also push those below it further down!

Overstyling is a common occurence, and it takes a bit to realise some of the "default logic" that is inherant in CSS.

So keep it simply, make a new page, and simply put coloured boxes in the order you want.

I t should do what you want automatically!