leftExpansion

for a stack overflow example

HTML

<div id="page">
    <div id="leftCol">
            LEFT
        </div>
    <div id="container">       
        <div id="rightCol">
            RIGHT
        </div>
    </div>
</div>

CSS

#page{
    background-color: purple;
    position:relative;
}
#container {
    background-color: blue;
    width: 980px;
    height: 300px;
    margin: 0 auto;
}
#leftCol {
    position:absolute;
    top: 0;
    left: 0;
    background-color: red;
    height: 300px;
    width: 200px;
}
#rightCol {
    padding-left:200px;
    background-color: green;
    height: 300px;
    width: auto;
}

JavaScript

$(window).on('resize', function(){
    var containerWidth = 980;
    var pageWidth = $(window).width();

    var tempW = Math.max(0, pageWidth-containerWidth) / 2;
    tempW  += 200;
    var w = Math.min(tempW, 400); // 400 = max width
    var l = Math.max(0, tempW - w);
    $('#leftCol').css({'width': w+'px', 'left': l+'px'});
}).resize();