responsive 2 column layout with 1 div fixed in size and the other stretching over the rest of the page (height and width) while not scrollable

Question

puh, i hope the title is not as confusing as it sounds. I'll try my best to explain since i cant post an image:

I want the left div to be fixed in width and contain some content like the usual website. The right div is supposed the be responsive to the browser window size (stretch over the rest width and complete hight) and non scrollable. Here is what i tried:

.left {
width: 200px;
background: grey;
float: left;
}
.right {
background: black;
color: white;
position:fixed;
left:200px;
width: 100%;
height: 100%;
text-align: center;
}

<div class="left">
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
</div>
<div class="right">
right content, fixed position,content centered, fills the 'rest' of the screen
</div>

problem is that this way i can't center content because the right div takes the whole bodys width and the content centers 'correctly' to far to the right.

http://jsfiddle.net/z2keq21r/

Answer 1

you could sized your fixed element (as much as absolute elements) via coordonates only: demo

.right {
    background: black;
    color: white;
    position:fixed;
    left:200px;
    right:0;
    top:0;
    bottom:0;
    text-align: center;
}

Answer 2

I've never been using this but u can try using calc() function to get the right width of the fixed column.

width: calc(100% - 200px);

http://jsfiddle.net/z2keq21r/5/

It's supported in modern browsers http://caniuse.com/#search=calc

Answer 3

I do not know if this is what you want to see , but I still tried to understand what I mean , see the modified code :

html,body {
margin:0;
padding:0;
}
.left {
background: grey;
float: left;
position:fixed;
left:0;
top:0;
}
.right {
background: black;
color: white;
float:left;
text-align: center;
position:fixed;
left:218px;
}

Answer 4

you could nest another div in the .right div and add some css like this:

<div class="right">
    <div class="right-text">right content, fixed position,content centered, fills the 'rest' of the screen</div>

.right-text{
    background: black;
    height: 100%;
    margin-left:200px;
}

http://jsfiddle.net/2jp17nar/1/