Question

I’m trying to create a position: fixed sidebar using bootstrap but I haven’t had any success yet. My attempts can be summed up with essentially:

<div class="container">
  <div class="row">
    <div class="span3">
    </div>
    <div class="span9">
    </div>
  </div>
</div>

and setting the position of the span3 column to be fixed, and trying various different css positions. However, it seems to break the size and positioning of the span9.

Is my attempt completely wrong? Or am I missing something completely?

Thanks!

Answer 1

It’s not possible to align the entire page in the center using twitter bootstrap or css.

But possible with a bit of jquery.

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);

And add id=”leftmargin” like below (scroll right):

<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>​

http://jsfiddle.net/baptme/NzqfL/