JSFiddle - React, Tailwind, and code Playground

by baptme

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="row">
    <div class="span3" style="position:fixed;background-color:green;height:100%;top:0px;" id="leftmargin">
        position fixed navbar (out of .container)
    </div>
</div>
<div class="container">
  <div class="row">
    <div class="span3" style="background-color:red">empty to avoid overflow</div>
      <div class="span9 offset3" style="background-color:blue;">
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
      </div>
  </div>
</div>

JavaScript

function sizing() {
    var windowwidth=$(window).width();
    var containerwidth=$('.container').width();
    var diff=windowwidth-containerwidth+40;
    $('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);
    if(diff>0) {
        $('#leftmargin').css('margin-left', (diff/2) +'px');
    } else {
        $('#leftmargin').css('margin-left', '20px');
    }
}
$(document).ready(sizing);
$(window).resize(sizing);