position:absolute and fill remaining space in div - css

Question

Please have a look at the following configuration:
http://codepen.io/anon/pen/mJYLpe?editors=110
I would like my #right div to stay at the right of the screen with a pre-defined width and I would like my #left div to fill the remaining space. Note that the #imagetag needs to stay at the bottom right of the filler div without needing a manual positioning.
Please know that this is not a duplicate - all of the provided solutions here require the "filler" div to have no position property - however I need the position:absolute property to make overflow:hidden work properly for my case (as you can see contained image is bigger than the container - it needs to be hidden)
Open to suggestions.

Answer 1

Add
position: absolute;
right: 0;
on the #right and then use calc(100% - 200px) on #left
http://codepen.io/anon/pen/oXRdPv?editors=110

Answer 2

You need to use positioning for this case. This is a case of:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

Answer 3

Edit from a previous answer, so comments might not be up to date.
Changes:
#left {
position: absolute;
height: 100%;
overflow: hidden;
width: calc(100% - 200px);
}
#right {
background-color: pink;
width: 200px;
height: 100%;
position: absolute;
right: 0;
z-index: 100;
}
And moved the image tag to be a container for the "left" and "right" boxes
See Fiddle:
http://codepen.io/anon/pen/NqVzNY?editors=110

Answer 4

I don't know what browsers you want to support but my go for this would be flexbox
Browser support of flexbox http://caniuse.com/#feat=flexbox
In flexbox you can set a min and max width to a div and next to it it will be responsive
http://codepen.io/anon/pen/NqVzpz?editors=110
set the carry to flex
#carry {
display: flex;
};
and the left to flex and only adding a width to the right one
#left {
flex: 1;
}
#right {
background-color: pink;
max-width: 200px;
min-width: 200px;
height: 100%;
flex: 1;
}
if you wane know what more awesome stuff flexbox is capable of check this https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

Add float: right on your #right element and add float: left on your #left element.
Also, the width of #left and #right elements should share a total of 100%.
Set the width and height to 100% on the #image element. Then apply the size of the image on background-size: 130%.
http://codepen.io/anon/pen/NqVMOv?editors=110