BootStrap , How to align a fixed right column at the right

Question

I have a nav bar at the right of an column that need to be fixed at the top of the container. The problem is when the nav is fixed, I am not able to align it correctly at the right of the left column... I can align it by using col-md-offset-xx but if the browser width change the nav will be not aligned anymore.

https://jsfiddle.net/DTcHh/18665/

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-md-9" style="border:1px solid green;">
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
    </div>
    <div class="col-md-3 col-md-offset-6" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

Answer 1

You need to use the non-stacking (xs) columns like this..

<div class="row">
    <!-- main -->
    <div class="column col-xs-9">
    ..
    </div>    
    <!-- sidebar -->
    <div class="column col-xs-3" id="sidebar">
      Fixed right sidebar
    </div>
</div>

This way the columns won't stack vertically (wrap into a new row) on smaller devices and your right sidebar can remain fixed.

http://www.bootply.com/DZ1Csh3dRH

Answer 2

In Bootstrap, the grid system is based on 12 columns and you are violating the grid system logic by adding .col-md-offset-6 class to the right column. If you want to have same ratio among left and right columns. Your code should be like this:

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="border:1px solid green;">
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
    </div>

    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

or if you want to add margin between left and right columns, your code should be like:

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="border:1px solid green;">
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
      <h1>left column</h1>
    </div>
    <div class="col-xs-3 col-xs-offset-6 col-sm-3 col-sm-offset-6 col-md-3 col-md-offset-6 col-lg-3 col-lg-offset-6" style="border:1px solid red;position:fixed;top:0px;">
      <h1>Right column</h1>
    </div>
  </div>
</div>

Here is an example you to understand grid and offset logic:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

As you see, total is 12 (col-md-4 + col-md-4 + col-md-offset-4) with offset.