set dynamic width

by wutyeetun87

HTML

<div id="main">
  <div id="forMenu">:P</div>
  <div id="container">
    <div id="scroll_div" class="half" style="background:red">
      <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
    </div>
    <div id="fixed_div" class="half" style="background:blue">Second Half</div>
  </div>
</div>

CSS

body, html {margin:0; padding:0;}
#main {float:left;width:100%;height:100%;background:;}
#forMenu {float:left;width:140px;height:400px;background:yellow;}
#container{float:left;height:400px;background:green;}
#container .half{float:left;height:400px;}
#scroll_div {float:left;position:relative;left:0;}
#fixed_div {position:fixed;right:0;}

JavaScript

$(document).ready(function(){
	setWidthForContainer();
});

$(window).resize(function(){
	setWidthForContainer();
});

function setWidthForContainer() {
	$('#container').width( $(document).width() - 140 );
  
  // 50% each
  if($(document).width() >= 600) {
  	$('.half').width( ($(document).width() - 140)/2 );
  }
  
  // 60% - 40%
  if($(document).width() < 600) {
  	$('#scroll_div').width( ($(document).width() - 140)*0.6 );
  	$('#fixed_div').width( ($(document).width() - 140)*0.4 );
  }
}