Responsive content div only - responsive-design

Question

Okay so simply I have this layout consisting of two elements, a navigation ("left") and the actual site content ("right").
Now what I want is that the "left" div just stays like it is, but when downsizing the screen to a certain size, I would like the content div's width to decrease with it.
However, I have no idea on how to start. When I look up responsive web design I can only find skeletons for entire layouts with loads of divs and percentages but I just want this for one div only and I'm totally confused.
This is what I have right now:
.right {
width: 750px;
margin: 40px 0 40px 50px;
float: left;
position: relative;
}
.left {
margin: 40px 0px 40px 40px;
width: 210px;
float: left;
position: relative;
}

Answer 1

Hopefully this http://jsbin.com/uquzaw/1/ isn't too overwhelming.
Essentially, you need percentages in your css and a meta tag in your html to get the effect you are looking for.

Answer 2

What you're asking for isn't exactly responsive design. If I understand you correctly, you are going to need percentage widths.
HTML:
<div id="left">
Nav1 <br>
Nav2 <br>
Nav3 <br>
Nav4 <br>
</div>
<div id="right">
This is where the main content will go.
</div>
CSS:
body { margin: 0; padding: 0; }
#left {
width: 20%;
height: 100%;
background: red;
float: left;
text-align: center;
}
#right {
width: 80%;
height: 100%;
background: blue;
float: left;
text-align: center;
}