css dynamic layout of two containers - html

Question

I have an interesting layout design problem that I was wondering if I could get some help with.
There are two containers next to each other, for the most part the one to the right is statically sized. The one to the left should grow based on dynamically loaded content. which could have quite a bit, or just a single data set. Now, the right container should always be next to the left one as it grows.
Here comes the tricky part. The left container cannot wrap and should take up to the remaining width on the screen, at which point scroll bars appear. At this point, the right container is next to the edge of the screen.
I can get it to work where the left container will ALWAYS take up the remaining screen real estate, but this pushes the right container all the way right side even if there is only a little bit of data on the left.
I can also get the data to grow and have the right side stay next to the left, but then the overflow scrollbars never appear. I am at my wits end on how to solve all of these requirements.
I can also just set widths for everything but that doesn't really solve the requirements of growing up to the screen resolution, and still doesn't solve for only tiny amounts of data
edit: Attached an image of my current layout. This looks good because it is "full", taking 100% of the browser width. What i need is to have the right portion move to the left if the data columns become so small it no longer scrolls.

Answer 1

I put together a jsfiddle of what I think you're trying to accomplish.
The right side column is fixed in width, and position.
The left column will expand in width, and scroll if the width becomes too small to display the inside content.
Here is the example:
http://jsfiddle.net/MwdED/
Here is the HTML:
<div class="container">
<div class="col-left">
<div class="col-content">
<div class="wide-content">
THis is some wide content, sitting inside of the left column.
</div>
</div>
</div>
<div class="col-right">
<div class="col-content">
This is the right column. It's fixed in width.
</div>
</div>
</div>
And the CSS
.container {
position: relative;
min-width: 500px; /*make sure the columns don't collapse on top of each other*/
}
.col-left {
padding-right: 200px; /*make room for right column*/
}
.col-left .col-content {
min-width: 300px; /* the minimum width, before overflow scrolling occurs */
overflow: auto;
}
.col-right {
position: absolute;
right: 0;
top: 0;
width: 200px;
}
.wide-content {
background: red;
width: 1000px;
}

Answer 2

Taking what Axel provided, I thought for sure something like this would work. The intent was to make both containers fluid so that no matter which one grew or shrank, the other would take up the difference, but for some reason the containers bleed into each other.
.col-left .col-content {
min-width: 20%; /* the minimum width, before overflow scrolling occurs */
max-width: 80%;
overflow: scroll;
}
.col-right {
position: absolute;
right: 0;
top: 0;
min-width: 20%;
max-width: 80%;
}