Hi I should really be able to do this but I'm just having a right old block with it so decided to pass it over to someone with a clearer head than me.

Here goes:

I have a wrapper div containing to column divs.

HTML Code:
  <div id="wrapper">
    <div id="left">undefined length of content</div>
    <div id="right">undefined length of content</div>
The wrapper has a flexible width and height determined by browser size or content. It needs to be positioned central from the left and right of the screen.

It's max width is 1200px and min width is 800px governed by screen size.

It's height is either 100% of browser window or greater if the content inside it pushes it past the height of the viewport.

This is the style for the wrapper

HTML Code:
body, html {height:100%; padding:0; margin:0}
#wrapper{ min-width:800px; max-width:1200px; min-height:100%; margin:0 auto !important; background:#F0F; position:relative; border-left:#00F solid 4px; border-right:#00F solid 4px;}
The two column divs inside the wrapper are called left and right.

Left is 400px wide and height is either 100% of the wrapper height or if it has greater content then the wrapper will wrap around it and scroll past the viewport, either way the bottom of the left div will hit the bottom of the screen or scrolled screen.

Exactly the same goes for the right div which is positioned to the right of the left div. The only difference is its width needs to fill the remaining space of the wrapper so it's min width is 400px and max width is 800px.

Both column divs should be the same height as each other. The height is governed by either which ever has the greatest content or if neither has enough content then they both want to be 100% of screen height. The wrapper must always wrap around both divs.

HTML Code:
#left{width:400px; min-height:100%; background:#333; position:absolute; top:0; left:0;}
#right{ min-height:100%; background:#666; position:absolute; top:0; left:400px;}
As you can see here I'm using position: absolute for the left and right divs, which won't work because as soon as you fill, say the left div with enough content to flow past the viewport then right div and wrapper fall short and don't have the same height as left div. They only have the height of the viewport and not of the total page.

I could use float: left to position the left and right divs, with an overflow or clear to make the wrapper wrap around them however I can't then control the width of the right div with max-width:800px; min-width:400px; and it has problems with the heights of the two divs as well.

So there you have it. Surely this can be done with css without having to resort to javascript?

If I've not made any of it clear please let me know.

Thanks in advance.